javascript - checkbox的全选，反选问题

问题描述

问 题

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

我自己的内容

html:

<label for="name">选服进行打补丁</label>
<div class="form-group">
    <div 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 %}
    </div>
<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">
</div>

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

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

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

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

这是为咋的？

解决方案

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

});

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