问

javascript - checkbox的全选，反选问题

Three-Kobe 发布于 2022-11-13 18:45

html

目前在学js中，对js不是很熟悉，网上参考的例子搞的：
网上的例子

我自己的内容

html:

选服进行打补丁

    

        {% for server in serverlists %}
        
            
            {{ server.serverName }}
        
        {% if  loop.index%10 ==0 %}
            

        {% endif %}
        {% endfor %}

js的内容就是，参考例子中最下边“总结”里的那些，没改过。

执行的效果
第一次选择时：

取消掉，第二次再选择，就没打勾的了

但，点击“获取所选中的所有值”时，也能获取的数据

这是为咋的？

4 个回答

控制表单元素本身就存在的属性时用jquery的prop方法，想要弄明白，请度娘jquery 的prop和attr的区别吧

2022-11-13 20:42 回答

和尚与尼姑离婚
checkbox类型的input标签，有个checked属性是绑定到元素自身的，即this.checked (jQuery.prop),而通过this.getAttribute('checked') (jQuery.attr)获取值是不准确的.

2022-11-13 20:42 回答

huanghxn
attr换成prop这个可以吗？

2022-11-13 20:42 回答

POWER_WALKING_823

通篇没有一个cache，滥用选择器
使用了1.10.2版本的jQuery还在使用attr操作property
脱裤子放屁的代码如下

if(this.checked){
    $("#list :checkbox").attr("checked", true);
}else{
    $("#list :checkbox").attr("checked", false);
}

明明一行搞定的玩意儿

$("#list :checkbox").attr("checked", this.checked);

这样的代码没有任何参考意义！我写的也仅供参考

$(function () {
    var $all = $('#all');
    var $selectAll = $('#selectAll');
    var $unSelect = $('#unSelect');
    var $reverseAll = $('#reverseAll');
    var $getValue = $('#getValue');
    var $list = $('#list');
    var $items = $list.find(':checkbox');


    $all.on('click', function () {
        toggleAll(this.checked);
    });

    $selectAll.on('click', function () {
        toggleAll(true);
    });

    $unSelect.on('click', function () {
        toggleAll(false);
    });

    $reverseAll.on('click', function () {
        var $checked = $items.filter(':checked');
        var $notChecked = $items.filter(':not(:checked)');

        $checked.prop('checked', false);
        $notChecked.prop('checked', true);

        $all.prop('checked', !$checked.length);
    });

    $items.on('click', function () {
        $all.prop('checked', !$items.filter(':not(:checked)').length);
    });

    $getValue.on('click', function () {
        var values = $items.filter(':checked')
                .map(function () {
                    return $(this).val();
                })
                .get()
                .join(',');

        console.log(values);
    });

    function toggleAll(flag) {
        $items.prop('checked', flag);
        $all.prop('checked', flag);
    }

});

2022-11-13 20:42 回答

浪费小创_512

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签