今天介绍一下：

复选框全选、复选框反选、复选框取值等等

HTML部分：

<div class="demo-kj">
  <div class="demo-btn">
   <button id="checkall">全选/反选</button>&#12288;&#12288;
   <button id="submit">查看选中值</button>
 </div>
  <label><input type="checkbox" name="ids[]" class='ids' value="1"/> &nbsp;value==1</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="2"/> &nbsp;value==2</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="3"/> &nbsp;value==3</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="4"/> &nbsp;value==4</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="5"/> &nbsp;value==5</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="6"/> &nbsp;value==6</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="7"/> &nbsp;value==7</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="8"/> &nbsp;value==8</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="9"/> &nbsp;value==9</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="10"/> &nbsp;value==10</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="11"/> &nbsp;value==11</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="12"/> &nbsp;value==12</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="13"/> &nbsp;value==13</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="14"/> &nbsp;value==14</label>
 <label><input type="checkbox" name="ids[]" class='ids' value="15"/> &nbsp;value==15</label>
</div>

JS部分：

<script src="./jquery.js"></script>

<script>



    /************ 全选两种写法 ***********/
    $("#checkall").click(function(){ 
        // 第一种写法
        $("input[name='ids[]']").each(function(){
            if(this.checked){
                this.checked = false;
            }else{
                this.checked = true;
            }
        });
        // 第二种写法
        $('.ids').each(function () {
            if ($(this).attr("checked")) {
                $(this).removeAttr("checked");
            } else {
                $(this).attr("checked",'true');
            }
        })
    })
    /***********************************/
    
    
    
    
    
    /***** 获取Checked值的两种写法 *****/
    // 方法1：在后台接收到的值如：1,21,2,23,25
    function getCheckedValue1(){
        var ids = [];
        $('.ids').each(function(){
            if($(this)[0].checked)ids.push($(this).val());
        });
        return ids.join(',');
    }
    // 方法2：在后台接收到的值如: ["11","2","3"] 在后台要用json_decode一下转成数组
    function getCheckedValue2(){
       var id = new Array();
        $("input[name='ids[]']").each(function(i,obj){
            if(this.checked) id[i] = this.value; 
        });
        return JSON.stringify(id); 
    }
    /***********************************/
    
    
    
    
    
    
    $("#submit").click(function(){
        var ids = getCheckedValue1();
        alert(ids);
    })
</script>

转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/159.html