Javascript复选框

最新推荐文章于 2023-10-20 16:21:07 发布

xw1985520

最新推荐文章于 2023-10-20 16:21:07 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVASCRIPT 文章标签： checkbox javascript

本文链接：https://blog.youkuaiyun.com/xw1985520/article/details/53914508

JAVASCRIPT 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用JavaScript来控制HTML中多个复选框全选、全不选及反选状态的简单示例。通过获取名为'ids[]'的所有复选框元素，并利用JavaScript函数实现对这些复选框的选择状态进行批量控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript  复选框</title>


</head>

<body>
<input type="checkbox" name="ids[]"  />新闻标题1<br/>
<input type="checkbox" name="ids[]"  />新闻标题2<br/>
<input type="checkbox" name="ids[]"  />新闻标题3<br/>
<input type="checkbox" name="ids[]"  />新闻标题4<br/>
<input type="checkbox" name="ids[]"  />新闻标题5<br/>
<input type="checkbox" name="ids[]"  />新闻标题6<br/>

<script>
//全选 获取对象
 var iobj = document.getElementsByName("ids[]");
 function selectAll(){   
     for(var i=0;i<iobj.length;i++){
         iobj[i].checked=true;
     }
 } 
 //全不选
 function unSelectAll(){
     for(var i=0;i<iobj.length;i++){
         iobj[i].checked=false;
     }
 }
 //反选 
 //判断checked属性 是 true置成false 是false置成true
 function inverse(){
     for(var i=0;i<iobj.length;i++){
         if(iobj[i].checked==true){
             iobj[i].checked=false;
         }else{
             iobj[i].checked=true;
         }
     }
 }


</script>
<a href="javascript:selectAll();">全选</a> | <a href="javascript:unSelectAll();">全不选</a>
| <a href="javascript:inverse();">反选</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>