全選與反選（dom與jquery比較）

qingyezhu發表於2014-07-29
jQuery
<html>
<head>
    <title>全選或反選(dom)</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    
    <script>
        
        var divCheckbox;
        function init(){
            var allCheckbox = document.getElementById("allId");
            allCheckbox.onclick = allOnClick;
            
            var reservseCheckbox = document.getElementById("reservseId");
            reservseCheckbox.onclick = reservseOnClick;
            
            divCheckbox = document.getElementById("divId").getElementsByTagName("input");
        }
        
        function allOnClick(){
            for(var i = 0,len = divCheckbox.length;i < len;i ++){
                divCheckbox[i].checked = this.checked;
            }
        }
        
        function reservseOnClick(){
            for(var i = 0,len = divCheckbox.length;i < len;i ++){
                divCheckbox[i].checked = !divCheckbox[i].checked;
            }
        }
        window.onload =init;
    </script>
</head>
    <body>
        <input id="allId" type="checkbox" />全選
        <input id="reservseId" type="checkbox" />反選
        <div id="divId">
            <input type="checkbox" />足球
            <input type="checkbox" />乒乓球
            <input type="checkbox" />羽毛球
            <input type="checkbox" />網球
            <input type="checkbox" />棒球
            <input type="checkbox" />籃球
            <input type="checkbox" />全選
        </div>
    </body>
</html>

 

 

 

<html>
<head>
    <title>全選或反選(jQuery)</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(function(){
            var $divCheckbox = $('#divId > input');
            var $allCheckbox = $('#allId');
            $allCheckbox.click(function(){
                //這裡不要使用attr，因為jQuery在1.6之後attr就某些時候不能夠工作了。
                //若使用attr，則在第一次可以看見效果，之後都無效！
                $divCheckbox.prop("checked",this.checked);
            });
            var $reservseCheckbox = $('#reservseId');
            $reservseCheckbox.click(function(){
                $divCheckbox.each(function(index,element){
                    element.checked = !element.checked;
                });
            });
        });
    </script>
</head>
    <body>
        <input id="allId" type="checkbox" />全選
        <input id="reservseId" type="checkbox" />反選
        <div id="divId">
            <input type="checkbox" />足球
            <input type="checkbox" />乒乓球
            <input type="checkbox" />羽毛球
            <input type="checkbox" />網球
            <input type="checkbox" />棒球
            <input type="checkbox" />籃球
            <input type="checkbox" />全選
        </div>
    </body>
</html>

 

相關文章