JavaScript的全选与反选

最新推荐文章于 2023-07-11 22:34:21 发布

安静点DGC

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量357

点赞数

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_26925297/article/details/79902391

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<body>


<table>
<tr>

<td><input type="checkbox" name="hobby"></td>
<td>篮球</td>
</tr>

<tr>

<td><input type="checkbox" name="hobby" ></td>
<td> 网球</td>
</tr>

<tr>

<td><input type="checkbox" name="hobby" ></td>
<td>羽毛球</td>
</tr>

<tr>

<td><input type="checkbox" name="hobby"></td>
<td> 足球</td>
</tr>


<tr>

<td>全选<input type="checkbox" id="all_id" οnclick="checkAll()" ></td>
<td>反选 <input type="checkbox" id="other_id" οnclick="otherAll()" ></td>
</tr>

</table>


</body>
<script type="text/javascript">

//1把所有的框找到
var hobbys=document.getElementsByName("hobby");
//2找到全选和反选
var all=document.getElementById("all_id");
var other=document.getElementById("other_id");
function checkAll(){
//当触发全选时，反选框失效
other.checked=false;
for(var i=0;i<hobbys.length;i++){

var hobby_element=hobbys[i];
hobby_element.checked=true;

}
}

function otherAll(){
//当触发反选时，全选框失效
all.checked=false;
for(var i=0;i<hobbys.length;i++){

var hobby_element=hobbys[i];
hobby_element.checked=!hobby_element.checked;

}
}

</script>

结果：

安静点DGC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的全选与反选

&lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="checkbox" name="hobby"&gt;&lt;/td&gt; &lt;td&gt;篮球&lt;/td&gt; &lt;/tr&a
复制链接

扫一扫

专栏目录