HTML全选与反选功能实现-优快云博客

<html>
 <head>
  <title>Html示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
<input type="checkbox" id="boxid" onclick="selectAllNo()"/>全选/全不选 
<br/>
<input type ="checkbox" name="love">篮球
<br/>
<input type ="checkbox" name="love">排球
<br/>
<input type ="checkbox" name="love">羽毛球
<br/>
<input type ="checkbox" name="love">乒乓球
<br/>
<input type="button" value="全选" onclick="selectAll()"/>
<input type="button" value="全不选" onclick="selectNo()"/>
<input type="button" value="反选" onclick="selectOther()"/>
<script type ="text/javascript">
//实现全选/全不选的操作
function selectAllNo() {
  var box =document.getElementById("boxid");
  if (box.checked==true) {
   selectAll();
  } else {
    selectNo();
  }
}

//全选的操作
 function selectAll() {
   var loves=document.getElementsByName("love"); 
   for(var i=0;i<loves.length;i++) {
          var love1 =loves[i];  
		  love1.checked=true;   //如果选中，属性checked设置成true  否则为false
   }
 }
 //全不选的操作
 function selectNo() {
 var loves2=document.getElementsByName("love");
 for(var i=0;i<loves2.length;i++) {
   var love2 =loves2[i];
   love2.checked=false;
 }
 }
 //反选的操作  意思就是比如总共4个 选了前面2个以后，点击反选会选择后面2个
 function selectOther() {
 var loves3 =document.getElementsByName("love");
 for (var i=0;i<loves3.length;i++) {
	 var love3=loves3[i];
	 if(love3.checked==true) {    //判断是否选中，如果选中了，就改成false；如果没有选中，就改成true
	        love3.checked=false;
	 } else {
	    love3.checked=true;
	 }
	 }
 }

</script>

 </body>
</html>

　结果为　