javascript - js全选反选问题

Question

html代码

<p class="col-md-12">
    <p class="form-group"">
    <p id="list">
    {% for db in owdbList %}

        <p class="checkbox checkbox-inline checkbox-info">
            <input type="checkbox" class="styled" id="{{ db.serverid }}" value="{{ db.serverid }}">
            <label for="{{ db.serverid }}">
                {{ db.servername }}
            </label>
        </p>

        {% if  forloop.counter|pisibleby:10 %}
            <br>
        {% endif %}

    {% endfor %}
    </p>

        <br><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>
</p>

js代码

//选服时的全选反选操作
$(function () {
    //全选或全不选
    $("#all").click(function(){
        if(this.checked){
            $("#list :checkbox").prop("checked", true);
        }else{
            $("#list :checkbox").prop("checked", false);
        }
     });
    //全选
    $("#selectAll").click(function () {
         $("#list :checkbox,#all").prop("checked", true);
    });
    //全不选
    $("#unSelect").click(function () {
         $("#list :checkbox,#all").prop("checked", false);
    });
    //反选
    $("#reverse").click(function () {
         $("#list :checkbox").each(function () {
              $(this).prop("checked", !$(this).prop("checked"));
         });
         allchk();
    });

    //设置全选复选框
    $("#list :checkbox").click(function(){
        allchk();
    });

    //获取选中选项的值
    $("#getValue").click(function(){
        var valArr = new Array;
        $('input[name="dbcheckbox"]:checked').each(function(i){
            valArr[i] = $(this).val();
        });
        var vals = valArr.join(',');
          alert(vals);
    });
});
function allchk(){
    var chknum = $("#list :checkbox").size();//选项总个数
    var chk = 0;
    $("#list :checkbox").each(function () {
        if($(this).prop("checked")==true){
            chk++;
        }
    });
    if(chknum==chk){//全选
        $("#all").prop("checked",true);
    }else{//不全选
        $("#all").prop("checked",false);
    }
}

除了“#all”,“全选”可以用，后面的，“全不选”、“反选”、“获取值”功能都不能正常使用，问题出现在哪里的

Answer 1

我复制了你的代码，可以啊。只是$('input[name="dbcheckbox"]:checked')这一句有问题而已

Answer 2

html：

<p class="box" style="text-align: center;line-height: 40px;letter-spacing: 10px">
    <input type="checkbox" value="1">1
    <input type="checkbox" value="2">2
    <input type="checkbox" value="3">3
    <input type="checkbox" value="4">4
    <input type="checkbox" value="5">5
    <input type="checkbox" value="6">6
    <br>
    <button>全选</button>
    <button>反选</button>
    <button>全不选</button>
    <button>获取所有选中的值</button>
    <p></p>
</p>

js：

    $(function(){
        var but = $('.box button');
        but.click(function(){
            var n = but.index($(this)),
                    inp = $('.box input[type=checkbox]'),
                    d_inp,
                    s_arr;

            if(n==0){
                inp.attr('checked','checked');
            }else if(n==1){
                d_inp = $('.box input[type=checkbox]:checked');
                inp.attr('checked','checked');
                d_inp.removeAttr('checked');
            }else if(n==2){
                inp.removeAttr('checked');
            }else if(n==3){
                d_inp = $('.box input[type=checkbox]:checked');
                s_arr=[];
                for(var i=0;i<d_inp.length;i++){
                    s_arr.push(d_inp.eq(i).attr('value'));
                }
                $('.box p').html('选中的值为：'+s_arr);
            }
        });
    });

Answer 3

$('input[name="dbcheckbox"]:checked')这样可以得到选中的按钮