javascript - checkbox的全选，反选问题

Question

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

我自己的内容

html:

<label for="name">选服进行打补丁</label>
<p class="form-group">
    <p id="list">
        {% for server in serverlists %}
        <label class="checkbox-inline">
            <input type="checkbox" name="dbcheckbox" id="{{ server.serverId }}" value="{{ server.serverId }}">
            {{ server.serverName }}
        </label>
        {% if  loop.index%10 ==0 %}
            <br>
        {% endif %}
        {% endfor %}
    </p>
<br>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</p>

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

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

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

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

这是为咋的？

Answer 1

• 通篇没有一个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);
    }

});

Answer 2

attr换成prop这个可以吗？

Answer 3

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

Answer 4

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