利用js控制复选框全选/取消全选的方法

发布日期:2020-02-04 20:47:52

  • 正文内容
  • 相关推荐

通过利用js来控制多个checkbox 复选框同时选中或同时取消选中的方法分享

一、js实现checkbox复选框全选/取消的方法:

html代码:

<input type="checkbox" name="text"/>梦城博客
<input type="checkbox" name="text" />篮球
<input type="checkbox" name="text" />排球
<input type="checkbox" name="text" />羽毛球
<input type="checkbox" name="text" />乒乓球
<input type="button" value="全选" onclick="setAll()" />
<input type="button" value="全不选" onclick="setNo()" />

JS代码:

<script>
//全选
function setAll() {
    var loves = document.getElementsByName("text");
    for (var i = 0; i < loves.length; i++) {
        loves[i].checked = true;
    }
}
//全不选函数
function setNo() {
    var loves = document.getElementsByName("text");
    for (var i = 0; i < loves.length; i++) {
        loves[i].checked = false;
    }
}
</script>
二、Jquery实现checkbox复选框全选/取消

<input type="checkbox" name="text"/>梦城博客
<input type="checkbox" name="text" />篮球
<input type="checkbox" name="text" />排球
<input type="checkbox" name="text" />羽毛球
<input type="checkbox" name="text" />乒乓球
<!--注意,下面的代码与上面示例的代码不同-->
<input type="button" value="全选" id="selectAll"/>
<input type="button" value="全不选" id="unSelect"/>
JS代码:

<script>
//全选
$('#selectAll').click(function () {
    $('input[type="checkbox"]').prop('checked', true);
});
//取消全选
$('#unSelect').click(function () {
    $('input[type="checkbox"]').prop('checked', false);
});
</script>

作者信息
头像
描述: ღ 我愿用一世阳光换你的微笑 ღ

本文标签:

文章标题:利用js控制复选框全选/取消全选的方法

文章链接:https://www.dcqzz.cn/post/1110

版权声明:若无特殊注明,本文皆为 ღ哪吒ღ 原创,转载请保留文章出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注