如果你真的想做一件事，你一定会找到方法；如果你不想做一件事，你一定会找到借口。

列表中checked全选按钮的实现

用过音乐播放器的人都知道有个全选按钮，如果使用Jquery实现，有个直接选中checked标签的方式

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="check" id="" value="" />
        <input type="checkbox" name="check" id="" value="" />
        <input type="checkbox" name="check" id="" value="" />
        <input type="checkbox" checked="checked" name="check" id="" value="" />
        <input type="checkbox" checked="false" name="check" id="" value="" />
        <input type="checkbox" name="check" id="" value="" />
        <button class="submit" id="submit">全选</button>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        var allLen = $("input[name='check']:checkbox").length;  /* 所有的选项卡的长度 */
        $(".submit").click(function(){
            var checkedLen = $(":checked").length;  /* 已被选中的长度 */
            if (checkedLen < allLen) { 
                $("input[name='check']:checkbox").each(function(){
                     $(this).prop("checked", true); 
                })
            }else{
                $("input[name='check']:checkbox").each(function(){
                     $(this).prop("checked", false);  
                })
            }            
        })
    </script>
</html>
View Code

但是如果使用JavaScript，就只能遍历判断了。代码如下

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="" id="" value="" />
        <input type="checkbox" name="" id="" value="" />
        <input type="checkbox" name="" id="" value="" />
        <input type="checkbox" checked="checked" name="" id="" value="" />
        <input type="checkbox" name="" id="" value="" />
        <input type="checkbox" name="" id="" value="" />
        <button class="submit1" id="submit1">全选</button>
    </body>
    <script type="text/javascript">
        var select1 = document.getElementById("submit1");
        var checkboxs = document.getElementsByTagName("input");
        
        select1.onclick = function(){
            var num = 0;
            for (k in checkboxs) {  
                if(checkboxs[k].checked){
                    num++;
                }
            }
            if (num == checkboxs.length) {    
                for (var i = 0;i<checkboxs.length;i++) {
                    checkboxs[i].checked = false;
                }                
            }else{                
                for (var i = 0;i<checkboxs.length;i++) {
                    checkboxs[i].checked = true;
                }    
            }
        }
    </script>
</html>
View Code

小知识：Jquery中prop()和attr()相对于checkbox的区别(可见不能用attr()进行checked判断)

 代码如下：

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="intersting" id="one" checked="checked" value=""/>
        <button id="button">显示prop和attr获取的值</button>
        <p class="prop"></p>
        <p class="attr"></p>
    </body>    
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $("#button").click(function(){
            $(".prop").html("prop(): "+$("input[name='intersting']").prop('checked'));
            $(".attr").html("attr(): "+$("input[name='intersting']").attr("checked"));
        })
    </script>
</html>
View Code

 

posted @ 2016-12-29 15:03  wanglehui  阅读(599)  评论(0)    收藏  举报