首頁 > web前端 > js教程 > 主體

Jquery全選與反選點擊執行一次的解決方案_jquery

WBOY
發布: 2016-05-16 15:45:01
原創
1139 人瀏覽過

程式碼需求, 使用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全選與反選點擊執行一次的解決方案,希望對大家有幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板