jQ全选效果

<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">
</body>
<script>
    $(function(){
        $("#selectAll").click(function(){
                $("#list :checkbox").attr("checked",true);
                $("#all").attr("checked",true);
        });
        $("#unSelect").click(function(){
            $("#list :checkbox").attr("checked",false);
            $("#all").attr("checked",false);
        });
        $("#reverse").click(function(){
            $("#list :checkbox").each(function(){
                $(this).attr("checked",!$(this).attr("checked"));//注意改变选中状态的时候用this，开始的时候用成了遍历 每一个用each
                all();
            })
        });
        $("#all").click(function() {
            if (this.checked) {
                $("#list :checkbox").attr("checked", true);
            } else {
                $("#list :checkbox").attr("checked", false);            　　　　　　　　}        
　　　　　　});        
　　　　$("#list :checkbox").click(function(){            all();        })        function all(){            var k = $("#list :checkbox").size();            var num = 0;            $("#list :checkbox").each(function(){                    if($(this).prop("checked") == true){                        num++;}                });            if(num == k){                $("#all").attr("checked",true);            }else {                $("#all").attr("checked",false);            }
巴特西

jQ全选效果

最新文章

热门文章
