程式碼需求, 使用attr只能執行一次,使用prop則完美實現全選和反選,取得所有選取的項目並把選取項目的文字組成一個字串。
解決方案一:
程式碼如下:
<html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" name="chk_list[]" value="1" />1 <input type="checkbox" name="chk_list[]" value="2" />2 <input type="checkbox" name="chk_list[]" value="3" />3 <input type="checkbox" name="chk_list[]" value="4" />4 <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选 <script type="text/javascript"> $("#chk_all").click(function(){ // 使用attr只能执行一次 $("input[name='chk_list[]']").attr("checked", $(this).attr("checked")); // 使用prop则完美实现全选和反选 $("input[name='chk_list[]']").prop("checked", $(this).prop("checked")); // 获取所有选中的项并把选中项的文本组成一个字符串 var str = ''; $($("input[name='chk_list[]']:checked")).each(function(){ str += $(this).next().text() + ','; }); alert(str); }); </script> </body> </html>
總結:
對於HTML元素本身就帶有的固有屬性,在處理時,使用prop方法。
對於HTML元素我們自己自訂的DOM屬性,在處理時,使用attr方法。
參考 http://www.jb51.net/article/62308.htm
解二:
問題描述:
$(".chooseall").click(function(){ if($(".chooseall").attr("checked") == "checked"){ $("input[name='checkbox1']").removeAttr("checked","checked"); console.log(1); }else{ $("input[name='checkbox1']").attr("checked","checked"); console.log(2); } });
上面的這個程式碼第一次點擊和第二次點擊,能實現全選和反選功能,但一遍之後就不再起作用,這是什麼情況啊
除了第一個checkbox之外,其餘的都是ajax動態產生的,跟這個有關係麼? console.log每次點擊的都能交替輸出1和2,但就是中間的程式碼不能執行。
解:
removeAttr參數只需要一個,removeAttr("checked")
不過建議替換成
$(".chooseall").click(function(){ if($(".chooseall").prop("checked") == true){ $("input[name='checkbox1']").prop("checked", false); console.log(1); }else{ $("input[name='checkbox1']").prop("checked", false); console.log(2); } });
或更簡潔的,
$(".chooseall").click(function(){ var isChecked = $(this).prop("checked"); $("input[name='checkbox1']").prop("checked", isChecked); });
以上是Jquery全選與反選點擊執行一次的解決方案,希望對大家有幫助。