javascript: checkbox 全选、取消全选、反选

问题描述

问 题

做的练习， 用JavaScript 实现对 checkbox 的全选、取消全选、反选 效果。
思路是根据情况给 checkbox 的 checked 赋值 true 或者 false。(这里有个问题： 为什么 <input type="checkbox" checked="不管是什么" > 谷歌里显示的都是打勾状态？？）

代码如下：

    QQQ<input type="checkbox">
    WWW<input type="checkbox">
    EEE<input type="checkbox">
    QQQ<input type="checkbox">
    QQQ<input type="checkbox">
<button onclick="getChecked('on')">全选</button>
<button onclick="getChecked('off')">取消全选</button>
<button onclick="getChecked('onWWoff')">反选</button>
<script>
function getChecked(a){
    var x = document.getElementsByTagName('input');
    for (var i = 0; i < x.length; i++){
        switch(a){
            case 'on':
                x[i].checked = true;
                break;
            case 'off':
                x[i].checked = false;
                break;
            case 'onWWoff':
                x[i].checked =! x[i].checked;  （这里只有是 '=!' 才可以实现反选效果， 所以 '=!' 是什么？？ 我只知道 '!=' 啊....
                break;
        };
    };
}
</script>
（我还用了 3个 `function` 和 `for` `if` 实现了这效果，不过那个没什么问题，除了有点长有点乱。。）

---

上面那个效果虽然实现了，后来在查资料时， 发现有个人说， 不应该直接改变`checked` 的值，因为`checkbox`状态改变时要处理一些问题？所以要`click`

他是因为`attr` `
以下原文和链接：

因一些原因要实现checkbox的单选，实现的方法是当选中一个checkbox时，用jQuery选择除这个刚选中的checkbox外所有已经被选中的checkbox，然后触发其click事件（因为每个checkbox状态改变时要处理一些问题，所以不能直接将其checked状态改为false），但却莫名其妙地进入了无限循环．

http://www.cnblogs.com/angeld...

---

以上就是我遇到的各种疑惑，拜托各位前辈帮帮忙.. 我弄了一个晚上这个了..

解决方案

首先要明确一点，标准的html中，checked本身应该是一个类似于开关一样的东西，而不是一个属性，就像readonly，disabled一样。

他只有存在和不存在两种状态，最标准兼容的办法应该是直接添加或者移除checked属性，而不是给他赋值true or false

因此建议你在dom操作中注意这一点，在不同的浏览器下才能有比较统一的正确效果。

这篇关于javascript: checkbox 全选、取消全选、反选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！