JavaScript的全选与反选

最新推荐文章于 2025-05-20 16:08:55 发布

安静点DGC

最新推荐文章于 2025-05-20 16:08:55 发布

阅读量421

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_26925297/article/details/79902391

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现网页中全选与反选功能的方法。通过获取页面上的复选框元素并监听全选与反选按钮的状态变化，可以方便地控制多个选项的选中状态。

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

<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" onclick="checkAll()" ></td>
<td>反选 <input type="checkbox" id="other_id" onclick="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>

结果：