首页 > > 网页制作 > css >

Jquery 全选、反选问题的记录

2018-06-23 23:29:44来源：未知阅读 ()

  <div id="list">  
       <ul id="choseList" >                 
                <li><input type="checkbox" name="chose" value="1"> 打篮球</li>
                <li><input type="checkbox" name="chose" value="1"> 踢足球</li>
                <li><input type="checkbox" name="chose" value="1"> 打乒乓球</li>
　　　　　　　　　 <li><input type="checkbox" name="chose" value="1">游泳</li>
                <li><input type="checkbox" name="chose" value="1"> 打羽毛球</li>
                <li><input type="checkbox" name="chose" value="1"> 打排球</li>     
            </ul>
    </div>
    <input type="button" id="all" value="全选/全不选">
    <input type="button" value="全选" class="btn" id="selectAll">  
    <input type="button" value="全不选" class="btn" id="unSelect">

Jquery的代码是这样实现的：（参考某大神EdieLei的回复博客链接 http://www.cnblogs.com/edielei）

个人觉得这种方法比之each好，所以拿来记录：

var a = true;
$(function(){
    //全选/全不选
    $('#all').click(function(){
        ck(a);
        a = a?false:true;
    });
    //全选
    $('#selectAll').click(function(){ck(true);});
    //全不选
    $('#unSelect').click(function(){ck(false);});
});
function ck(b){
    $('input[name="chose"]').prop('checked',b);
}

当然each的方法也可以：

$("#list :checkbox").each(function () {

                if ($(this).attr("checked") == true) {   

                    $(this).attr("checked",false) ;
                }
                else {              
                     $(this).attr("checked",true);  
                }                
             });