全选，取消全选，反选按钮

最新推荐文章于 2023-04-02 15:32:51 发布

原创最新推荐文章于 2023-04-02 15:32:51 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

这篇博客介绍了如何使用JavaScript实现全选和取消全选的功能，通过示例代码展示了两种不同的实现方式。第一种方式简单直接，但存在一个问题，即当用户手动勾选部分选项后，点击全选按钮需要点击两次才能达到预期效果。第二种方式通过检查是否存在未勾选的选项，优化了这一问题，确保一键全选或取消全选。

看书：<input type="checkbox" name="checkbox" value=1><br>
写字：<input type="checkbox" name="checkbox"value=2><br>
打飞机：<input type="checkbox" name="checkbox"value=3><br>
玩游戏：<input type="checkbox" name="checkbox"value=4><br>
<button onclick="allcheck()">全选/取消</button>

var checkAll = false;
function allcheck(){
    checkAll = !checkAll;
    let inputs = document.getElementsByName('checkbox')
    for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}
}

这么写如果手动勾选全部，再点按钮则需要点两下，另一写法可以避免：

function allcheck(){
    var checkFlag = false;    //默认执行的操作是取消全选
    var inputs = document.getElementsByName('checkbox');
    for(var i = 0; i < inputs.length; i++) {
        if(!inputs[i].checked) {    //如果存在未勾选的状态则要做的是全选
            checkFlag = true;
            break;    //可加可不加，加了可能能减少遍历的时间，不加也不会对结果有影响
        }
    }
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].checked = checkFlag;
    }
}