javascript: checkbox 全选、取消全选、反选
高洛峰
高洛峰 2016-10-28 13:16:27
[JavaScript讨论组]

做的练习, 用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...

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


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
三叔

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

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

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


热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号