이 문서의 예에서는 확인란을 선택한 후 관련 입력 상자를 회색으로 만들고 사용할 수 없도록 JavaScript를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
이 기능은 일부 웹사이트에서 흔히 볼 수 있습니다. 확인란을 선택하면 관련 옵션이 회색으로 표시되고 사용할 수 없게 됩니다. 이는 사용자 경험을 향상시키는 방법이기도 합니다.
작동 효과는 아래와 같습니다.
구체적인 코드는 다음과 같습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>选中复选框，相关类变灰</title>
<script language="JavaScript">
<!--
function selectKind(the){
var obj = the;
var container = document.getElementById("kind_" + obj.name);
for(var i=0;i<container.getElementsByTagName("input").length;i++)
{
container.getElementsByTagName("input")[i].disabled = obj.checked;
}
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<input type='checkbox' value="2" name=aa onclick="selectKind(this)">我从事游戏编程
<div id="kind_aa">
<input type='checkbox' value="php" name=aa>PHP
<input type='checkbox' value="asp.net" name=aa>ASP.NET
<input type='checkbox' value="java" name=aa>JAVA
</div>
<input type='checkbox' value="1" name=bb onclick="selectKind(this)">平时不上网
<div id="kind_bb">
<input type='checkbox' value="baidu.com" name=bb>baidu.com
<input type='checkbox' value="163.com" name=bb>163.com
<input type='checkbox' value="jb51.net" name=bb>jb51.net
</div>
</body>
</html>이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
