上篇文章说了一下利用 js 来获取多个被选中复选框的值的方法,那么乘热打铁这篇文章来说一说利用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>

以上代码运行效果如下图:

s实现checkbox全选,s实现checkbox全不选

Jquery实现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="全选" 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>