Question

以下页面加载成功检查所有复选框：

(function($){

$(':checkbox').prop("checked",true);


}(jQuery));

但是当在按钮的单击事件中运行它时它没有，html值和警报成功地工作，所以if语句确实有效。

$('#selectAll').click(function(){
                 if($(this).html() == 'Check All'){
                     $(':checkbox').prop("checked",true);
                     $(this).html('Uncheck All');
                     alert('check all');
                 }
                 else{
                     $(':checkbox').prop("checked",false);
                     $(this).html('Check All');
                     alert('uncheck all');
                 }
            });

以下编辑按要求显示html。我相信有些东西正在干扰它，因为最初说检查复选框的行在if语句之外工作。 if语句起作用并更改按钮的html值。虽然检查复选框行在if语句中不起作用。我正在使用Datatables.js但是在这个表上禁用它以防有效。编辑（HTML）：

<form method="POST" action="http://dev.co.uk/dashboard/export" accept-charset="UTF-8" role="form" class="form-horizontal"><input name="_token" type="hidden" value="fY87JvJYUjeHySDA9kmE72v2I9INRom1X63JyrKr">
<button type="button" class="btn green" id="selectAll">Check All</button>
<button type="submit" class="btn blue">Export</button>
<table class="table table-striped table-bordered table-hover" id="export">
<thead>
<tr>
<th>Select</th>
<th>Sku</th>
<th>Title</th>
<th>Belongs to</th>
<th>Brand</th>
<th>Category(s)</th>
<th>Description</th>
</tr>
</thead>
<tbody>

<tr>
<td> <label><input class="form-control selectAll" name="products[]" type="checkbox" value="1">  </label> </td>
<td> Product1 </td>
<td> Red T-shirt </td>
<td> T-Shirts </td>
<td> EZ T </td>
<td> Clothing, </td>
<td> Blurb goes here </td>
</tr>

<tr>
<td> <label><input class="form-control selectAll" name="products[]" type="checkbox" value="2">  </label> </td>
<td> Product2 </td>
<td> blue T-shirt </td>
<td> T-Shirts </td>
<td> EZ T </td>
<td> Clothing, </td>
<td> Blurb goes here </td>
</tr>

<tr>
<td> <label><input class="form-control selectAll" name="products[]" type="checkbox" value="3">  </label> </td>
<td> Product3 </td>
<td> green T-shirt </td>
<td> T-Shirts </td>
<td> EZ T </td>
<td> Clothing, </td>
<td> Blurb goes here </td>
</tr>

<tr>
<td> <label><input class="form-control selectAll" name="products[]" type="checkbox" value="4">  </label> </td>
<td> Product4 </td>
<td> Purple T-shirt </td>
<td> T-Shirts </td>
<td> EZ T </td>
<td> Clothing, </td>
<td> Blurb goes here </td>
</tr>
</tbody>
</table>

Answer 1

我可以看到你的HTML，但if语句不应该是if($(this).val() == 'Check All'){

Answer 2

您的if语句似乎运行正常。我试图让你的第一个功能正常工作时遇到了麻烦。我做了一些调整并在代码中添加了注释。基本上我使用$(document).ready来触发一些代码，然后$(#selectAll).click用于点击事件。希望它有所帮助！

$(document).ready(function(){
  $(':checkbox').prop("checked",false); // run this on load
  $('#selectAll').html('Check All'); // run this on load
  $('#selectAll').click(function(){  // run everything here when an item is clicked
     if($(this).html() == 'Check All'){
         $(':checkbox').prop("checked",true);
         $(this).html('Uncheck All');
     }
     else{
         $(':checkbox').prop("checked",false);
         $(this).html('Check All');
     }
  });
});

Answer 3

您可以使用addClass，removeClass＆amp; hasClass选中/取消选中所有复选框。建议使用类而不检查if条件中的字符串/文本：

＆＃13;

$('#selectAll').click(function() {
  if (!$(this).hasClass('active')) {
    $(':checkbox').prop("checked", true);
    $(this).html('Uncheck All').addClass('active');
    alert('check all');
  } else {
    $(':checkbox').prop("checked", false);
    $(this).html('Check All').removeClass('active');
    alert('uncheck all');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="http://dev.co.uk/dashboard/export" accept-charset="UTF-8" role="form" class="form-horizontal"><input name="_token" type="hidden" value="fY87JvJYUjeHySDA9kmE72v2I9INRom1X63JyrKr">
  <button type="button" class="btn green" id="selectAll">Check All</button>
  <button type="submit" class="btn blue">Export</button>
  <table class="table table-striped table-bordered table-hover" id="export">
    <thead>
      <tr>
        <th>Select</th>
        <th>Sku</th>
        <th>Title</th>
        <th>Belongs to</th>
        <th>Brand</th>
        <th>Category(s)</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td> <label><input class="form-control selectAll" name="products[]" type="checkbox" value="1">  </label> </td>
        <td> Product1 </td>
        <td> Red T-shirt </td>
        <td> T-Shirts </td>
        <td> EZ T </td>
        <td> Clothing, </td>
        <td> Blurb goes here </td>
      </tr>

      <tr>
        <td> <label><input class="form-control selectAll" name="products[]" type="checkbox" value="2">  </label> </td>
        <td> Product2 </td>
        <td> blue T-shirt </td>
        <td> T-Shirts </td>
        <td> EZ T </td>
        <td> Clothing, </td>
        <td> Blurb goes here </td>
      </tr>

      <tr>
        <td> <label><input class="form-control selectAll" name="products[]" type="checkbox" value="3">  </label> </td>
        <td> Product3 </td>
        <td> green T-shirt </td>
        <td> T-Shirts </td>
        <td> EZ T </td>
        <td> Clothing, </td>
        <td> Blurb goes here </td>
      </tr>

      <tr>
        <td> <label><input class="form-control selectAll" name="products[]" type="checkbox" value="4">  </label> </td>
        <td> Product4 </td>
        <td> Purple T-shirt </td>
        <td> T-Shirts </td>
        <td> EZ T </td>
        <td> Clothing, </td>
        <td> Blurb goes here </td>
      </tr>
    </tbody>
  </table>

＆＃13;

Jquery检查所有复选框在if语句中不起作用

3 个答案: