javascriptはチェックボックスの全選択または逆選択を実現します。


以下は、元のjsで実現したチェックボックスの全選択/逆選択を実現し、チェックボックスを選択した場合、全選択の効果を実現し、スタイルが変更されます。
コードは最も簡潔で、js行為最適化版で、コピーして貼り付けすればいいです。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>     /      </title>
 <style>
  body,dl,dt,dd,p{margin:0;padding:0;}
  body{font-family:Tahoma;font-size:12px;}
  label,input,a{vertical-align:middle;}
  label{padding:0 10px 0 5px;}
  a{color:#09f;text-decoration:none;}
  a:hover{color:red;}
  dl{width:120px;margin:10px auto;
  border-radius:5px;background:#fafafa;}
  dt{padding-bottom:10px;
  border-bottom:1px solid #666;}
  dt label{font-weight:700;}
  p{margin-top:10px;}
 </style>
</head>
<body>
 <dl>
 <dt><input type="checkbox" id="checkAll" /><label>  </label><a href="javascript:;">  </a></dt>
 <dd>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
  <p><input type="checkbox" name="item" /><label>  ( )</label></p>
 </dd> 
</dl>
<script type="text/javascript">
(function(){
 var aInput = document.getElementsByTagName("input");
 var aBack = document.getElementsByTagName("a")[0];
 var aLabel = document.getElementsByTagName("label")[0];
 var allInput = aInput[0];
  //    ,         ,         ,        
  allInput.onclick=function(){
   if(aInput[0].checked){
   for(var i=1;i<aInput.length;i++){
    aInput[i].checked = true;
   }
    aLabel.innerHTML = "   ";
   }
   else{
    for(var i=1;i<aInput.length;i++){
    aInput[i].checked = false;
    }
    aLabel.innerHTML = "  ";
   }

  }
  //    ,             
  aBack.onclick=function(){
   for(var i=1;i<aInput.length;i++){
    aInput[i].checked = !aInput[i].checked;
   }
  }
})();
</script>
</body>
</html>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。