jquery 實現的全選demo
阿新 • • 發佈：2017-09-05
影響 ext script rop 選擇框 有一個 javascrip 如果 bind
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="dist/jquery.js" type="text/javascript"></script> <title>田林哥哥選擇框練習</title> <script type="text/javascript"> //讓全選框影響子框的方法$(function(){ //拿到所有類名為all的，綁定一個點擊事件 $(".all").bind("click",function(){ //拿到當前對象的name屬性， var name = $(this).prop("name"); //如果當前全選框處於被選擇狀態 有checked屬性 if ($(this).prop("checked")) { //那就讓類名和當前name相同的選擇框都變成選擇狀態 $("."+name).prop("checked","tl"); } else{ //如果全選框處於為未被選中狀態，那他的兒子們，都要移除掉checked $("."+name).removeProp("checked"); } })//讓子框影響全選框的方法 $(".hobby,.star,.girl").bind("click",function(){ //是否所有子框都被選中了？初始值為 真 var isChecked = true; //拿到所有跟當前類名相同的子框，進行遍歷 $("."+this.className).each(function(){ //只要有一個子框是未選中狀態，那就讓isChecked為假 if(!$(this).prop("checked")){ isChecked = false; } }) //遍歷完畢，判斷isChecked,為真則說明所以子框都被選中，那就選中全選框 if(isChecked) $("[name=‘"+this.className+"‘]").prop("checked","tl"); else//否則就讓全選框處於未選中狀態 $("[name=‘"+this.className+"‘]").removeProp("checked"); }) }) </script> </head> <body> <h1>你的愛好</h1> 全選<input type="checkbox" class="all" name="hobby"/><br /> 籃球<input type="checkbox" class="hobby" /> 足球<input type="checkbox" class="hobby" /> 臺球<input type="checkbox" class="hobby" /> 網球<input type="checkbox" class="hobby" /> 球球大作戰<input type="checkbox" class="hobby" /> <hr> <h1>你喜歡的明星</h1> 全選<input type="checkbox" class="all" name="star"/><br /> 劉德華<input type="checkbox" class="star" /> 迪麗熱巴<input type="checkbox" class="star" /> 高圓圓<input type="checkbox" class="star" /> 李嘉欣<input type="checkbox" class="star" /> 周慧敏<input type="checkbox" class="star" /> <hr> <h1>受人敬仰的妹子</h1> 全選<input type="checkbox" class="all" name="girl"/><br /> 胡美晴<input type="checkbox" class="girl" /> 張菲莉<input type="checkbox" class="girl" /> 金嘉融<input type="checkbox" class="girl" /> 李若妍<input type="checkbox" class="girl" /> 任俊可<input type="checkbox" class="girl" /> </body> </html>
jquery 實現的全選demo