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按钮适用于单个按钮，但不适用于选择全部取消选择

回答

相关问题