国产视频app上篇文章說了一下利用 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>