对CHECKBOX的全选，全取消，反向选择

最新推荐文章于 2022-03-07 22:34:54 发布

原创最新推荐文章于 2022-03-07 22:34:54 发布 · 933 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #button #function #c #javascript

本文介绍了一个简单的网页示例，通过JavaScript实现对多个复选框进行全选、全取消及反选的功能。该示例使用了基本的HTML结构，并结合JavaScript来控制页面上的复选框状态。

<body>
<form   name=abc>
<input TYPE="checkbox" name="c1">
<input TYPE="checkbox" name="c2">
<input TYPE="checkbox" name="c3">
<input TYPE="checkbox" name="c4">
<input type="checkbox" name="c5">
<input type="checkbox" name="c6">
<input type="checkbox" name="c7">
<input type="checkbox" name="c8">
</form>
<br>
<input type="button" value="全選" onclick="selAll();">
<input type="button" value="全取消" onclick="unselAll();">
<input type="button" value="反向選取" onclick="usel();">
</body>
<script language="JavaScript">
function selAll(){
                var   c=abc.all;
          for(i=0;i<c.length;i++)
          {
                  if(c[i].type=='checkbox')
                          c[i].checked=true;
          }

}
function unselAll(){
  var   c=abc.all;
          for(i=0;i<c.length;i++)
          {
                  if(c[i].type=='checkbox')
                          c[i].checked=false;
          }

}
function usel(){
  var   c=abc.all;
          for(i=0;i<c.length;i++)
          {
                  if(c[i].type=='checkbox')
                          c[i].checked=!c[i].checked;
          }
}
</script>