用jquery怎么实现全选与反选

 我来答
慕刓辞
2016-04-28 · 知道合伙人软件行家
慕刓辞
知道合伙人软件行家
采纳数:583 获赞数:1704
从事前端开发4年,喜欢专研H5各种网页效果!

向TA提问 私信TA
展开全部
<ul id="list">   
   <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> 
   <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li> 
   <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li> 
   <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li> 
   <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li> 
   <li><label><input type="checkbox" value="6"> 6.喜欢你</label></li> 
</ul> 
<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"> 
$(function () { 
    //全选或全不选 
    $("#all").click(function(){    
        if(this.checked){    
            $("#list :checkbox").attr("checked", true);   
        }else{    
            $("#list :checkbox").attr("checked", false); 
        }    
     });  
    //全选   
    $("#selectAll").click(function () { 
         $("#list :checkbox,#all").attr("checked", true);   
    });   
    //全不选 
    $("#unSelect").click(function () {   
         $("#list :checkbox,#all").attr("checked", false);   
    });   
    //反选  
    $("#reverse").click(function () {  
         $("#list :checkbox").each(function () {   
              $(this).attr("checked", !$(this).attr("checked"));   
         }); 
         allchk(); 
    }); 
     
    //设置全选复选框 
    $("#list :checkbox").click(function(){ 
        allchk(); 
    }); 
  
    //获取选中选项的值 
    $("#getValue").click(function(){ 
        var valArr = new Array; 
        $("#list :checkbox[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).attr("checked")==true){ 
            chk++; 
        } 
    }); 
    if(chknum==chk){//全选 
        $("#all").attr("checked",true); 
    }else{//不全选 
        $("#all").attr("checked",false); 
    } 
}
奔流的宵析
2016-04-28 · TA获得超过375个赞
知道小有建树答主
回答量:207
采纳率:0%
帮助的人:126万
展开全部
<body>
<input type="checkbox" onclick="checkAll(this)" />  全选  <br />
<input type="checkbox" id="a" />1  <br />
<input type="checkbox" id="a" />2  <br />
<input type="checkbox" id="a" />3  <br />
<input type="checkbox" id="a" />4  <br />
</body>
<script> 
//复选框全选与反选
function checkAll(obj) {
var aList=$("input#a");
for(var i=0;i<aList.length;i++){
aList[i].click();
aList[i].checked=obj.checked;
}
}
</script>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式