JQuery：顯示/隱藏Div按鈕適用於單個按鈕，但不適用於選擇全部取消選擇

我遇到了一個腳本問題，我正在製作一個表格中的項目列表，該列表在搜索後可能需要通過選擇他們。這些選項位於ID爲「ProjectListButton」的Div中。除了當我取消選擇「selectall」時，該腳本可以在任何地方使用。JQuery：顯示/隱藏Div按鈕適用於單個按鈕，但不適用於選擇全部取消選擇

所以當我點擊收音機ID選擇全部，它選擇所有，並顯示div。當我取消選擇收音機選擇它並不會刪除Div。

<div id="ProjectListButton" style="display:none;">With selected: </div> 
<div id="data-table"> 
<table cellspacing='0'> 
    <thead> 
     <tr> 
      <th><input class="pChk" id="selectall" type="checkbox"></th> 
      <th>Keyword</th> 
      <th>Searches (daily)</th> 
      <th>SEO Traffic (daily)</th> 
      <th>Competitiveness</th> 
      <th>SEO Value</th> 
      <th>Average CPC</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input class="pChk" type="checkbox" name="keywords" value="example"></td> 
      <td>example/td> 
      <td>1,332</td> 
      <td>559</td> 
      <td><div style="height:15px; border:1px solid #800000; width:100%"><div style="height:15px;background:#990000; width:1.05%;"></div></td> 
      <td><div style="height:15px; border:1px solid #2E8AE6; width:100%"><div style="height:15px;background:#3399FF; width:3.83%;"></div></td> 
      <td>$15.86</td> 
     </tr> 
    </tbody> 
</table> 
</div> 
</section> 
</div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script> 
    <script src="js/plugins.js"></script> 
    <script src="js/main.js"></script> 
    <script> 
    function myFunction() { 
     document.getElementById("search").submit(); 
    } 
    </script> 

    <script> 
     $(document).ready(function() { 
      $('#selectall').click(function(event) { //on click 
       if(this.checked) { // check select status 
        $('.pChk').each(function() { //loop through each checkbox 
         this.checked = true; //select all checkboxes with class "pChk"    
        }); 
       }else{ 
        $('.pChk').each(function() { //loop through each checkbox 
         $(this).prop("checked",false); //deselect all checkboxes with class "pChk"      
        });   
       } 
      }); 

     }); 
     $('.pChk').click(function() { 
      if ($('.pChk:checked').length > 0) { 
       $("#ProjectListButton").show(); 
      } else { 
       $("#ProjectListButton").hide(); 
      } 
     }); 

    </script>

我一直在拉我的頭髮，爲什麼。有一點要注意的是，選擇所有無線電同時具有pChk類和selectall id，這是否會導致問題？

編輯：我也添加了html。 Vanojx1該解決方案沒有奏效

來源

2015-07-20 Colum Kelly

請發送完整的代碼示例。 – j08691

嘗試更改this.checked = false;與$（this）.prop（「checked」，false）; – Vanojx1

我檢查你的jQuery代碼，在您的jQuery代碼我發現，這$('.pChk').click(function() {代碼是不是在$(document).ready(function() {。所以請將該代碼放入$(document).ready(function() {

對於I.E.

<script> 
    $(document).ready(function() { 
     $('#selectall').click(function(event) { //on click 
      if(this.checked) { // check select status 
       $('.pChk').each(function() { //loop through each checkbox 
        this.checked = true; //select all checkboxes with class "pChk"    
       }); 
      }else{ 
       $('.pChk').each(function() { //loop through each checkbox 
        this.checked = false; //deselect all checkboxes with class "pChk"      
       });   
      } 
     }); 
     $('.pChk').click(function() { 
      if ($('.pChk:checked').length > 0) { 
      $("#ProjectListButton").show(); 
      } else { 
      $("#ProjectListButton").hide(); 
      } 
     }); 
    }); 


</script>

來源

2015-07-20 16:03:20

就是這樣。總是有點簡單！ –

$(function() { 
 
    var checkbox = $('.checkbox'); 
 
    
 
    $('#selectall').on('change', function(event) { 
 
    checkbox.prop('checked', this.checked); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body> 
 
<label> 
 
    <input type="checkbox" id="selectall"> 
 
    Select All 
 
</label> 
 
<input type="checkbox" class="checkbox"> 
 
<input type="checkbox" class="checkbox"> 
 
<input type="checkbox" class="checkbox"> 
 
<input type="checkbox" class="checkbox"> 
 
</body> 
 
</html>

來源

2015-07-20 15:51:16

JQuery：顯示/隱藏Div按鈕適用於單個按鈕，但不適用於選擇全部取消選擇

回答

相關問題