全選練習-原生版和jQuery

你若精彩，蝴蝶自來發表於2018-07-30
jQuery

今天來做一些練習，做全選練習

原生版的實現：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
        </style>
    </head>
    <script type="text/javascript">
        window.onload = function(){
            var items = document.getElementsByName("items");
            
            var checkedAllBox = document.getElementById("checkedAllBox");
            //全選
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function(){
                
                for(var i = 0; i<items.length;i++){
                    items[i].checked = true;
                }
                //更新全選和全不選
                checkedAllBox.checked = true;
            }
            //全不選
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function(){
                for(var i = 0; i<items.length;i++){
                    items[i].checked = false;
                }
                //更新全選和全不選
                checkedAllBox.checked = false;
            }
            //反選
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function(){
                
                for(var i = 0; i<items.length;i++){
                    items[i].checked = !items[i].checked;
                    if (!items[i].checked) {
                        checkedAllBox.checked = false;
                    }
                }
            }
            //提交
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function(){
                for(var i = 0; i<items.length;i++){
                    if(items[i].checked){
                        alert(items[i].value)
                    }
                }
            }
            //通過點選全選和全不選，items也選中
            checkedAllBox.onclick = function(){
                for(var i =0;i<items.length;i++){
                    items[i].checked = this.checked;
                }
            }
            //通過點選items，如果有全選則全選、全不選也出現
            for (var i = 0; i < items.length; i++) {
                items[i].onclick = function(){
                    checkedAllBox.checked = true;
                    
                    for(var j =0;j<items.length;j++){
                    if(!items[j].checked){
                        checkedAllBox.checked = false;
                        break
                    }
                }
                }
            }
        }
    </script>

    <body>

        <form method="post" action="">
            你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選

            <br />
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="籃球" />籃球
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
            <input type="checkbox" name="items" value="乒乓球" />乒乓球
            <br />
            <input type="button" id="checkedAllBtn" value="全　選" />
            <input type="button" id="checkedNoBtn" value="全不選" />
            <input type="button" id="checkedRevBtn" value="反　選" />
            <input type="button" id="sendBtn" value="提　交" />
        </form>
    </body>

</html>

 

功能說明:
1. 點選'全選': 選中所有愛好
2. 點選'全不選': 所有愛好都不勾選
3. 點選'反選': 改變所有愛好的勾選狀態
4. 點選'提交': 提示所有勾選的愛好
5. 點選'全選/全不選': 選中所有愛好, 或者全不選中
6. 點選某個愛好時, 必要時更新'全選/全不選'的選中狀態

　　　　　　　　$(function(){
                var $items = $(":checkbox[name='items']");
                var $checkedAllBox = $("#checkedAllBox");
                //1. 點選'全選': 選中所有愛好
                $("#checkedAllBtn").click(function(){
                    
                //$items.each(function(){
                //this.checked = true;
                //})
                ////全選/全不選選項
                //$checkedAllBox[0].checked = true;
                $items.prop("checked",true);
                $checkedAllBox.prop("checked",true);
                });
                
                //2. 點選'全不選': 所有愛好都不勾選
                $("#checkedNoBtn").click(function(){
                    $items.prop("checked",false);
                    $checkedAllBox.prop("checked",false);
                });
                
                //3. 點選'反選': 改變所有愛好的勾選狀態
                $("#checkedRevBtn").click(function(){
                    $items.each(function(){
                        this.checked = !this.checked;
                    })
                    $checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)
                });
                
                //4. 點選'提交': 提示所有勾選的愛好
                $("#sendBtn").click(function(){
                    $items.filter(':checked').each(function () {
                      alert(this.value)
                    })
                });
                //5. 點選'全選/全不選': 選中所有愛好, 或者全不選中
                $checkedAllBox.click(function(){
                    
                    $items.prop("checked",this.checked);
                });
                
                //6. 點選某個愛好時, 必要時更新'全選/全不選'的選中狀態
                $items.click(function(){
                    $checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)
                })
                
                
            })

 

相關文章