复选框实现全选全不选操作

最新推荐文章于 2022-03-01 14:35:00 发布

原创最新推荐文章于 2022-03-01 14:35:00 发布 · 751 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #html5

本文介绍了如何通过简单的JavaScript代码操作，实现主复选框控制次级复选框的全选全不选功能，只需在主复选框的点击事件中设置次级复选框的checked属性。

实现复选框全选全不选操作只需要一行代码即可

直接上代码：

//主复选框
<input type="checkbox" id="btn">
//次复选框
<input type="checkbox" class="btns">
//使用JS完成全选全不选操作
<script>
    //给主复选框设置点击事件
    $("#btn").click(function ()
    {
       //给次复选框设置checked属性，第一个参数为当前元素的索引值，第二个参数为原先的属性值
       $(".btns").prop("checked",$(this).prop("checked"));
    });
</script>