Question

在我的项目中，我有多个复选框（共27个）。我试图通过单击按钮选择所有复选框，我能够做到。但我想取消选中相同的复选框相同的按钮单击。因此按钮应该像选择器和取消选择器。我不能使用复选框而不是按钮。我的HTML代码是：

<div class="countryAll">
    <span class="countrySelect_lngTrans_Translatable" title="Select All">
                <input type="button" class="selectAllcountry" />
            </span>
    <span class="displayData">Select whole country</span>
</div>

在js：

$(self.element).on('click', '.selectAllcountry', function(e) {
    debugger;
    $('.chkCountry').trigger('click')
    e.stopPropagation();
});

Answer 1

试试这个

 $('.selectAllcountry').on('click', function(){  
     if ($('.selectAllcountry').is(':checked')) {     
         $('.chkCountry').find(':checkbox').prop('checked', true); 
     } else {
         $('.chkCountry').find(':checkbox').prop('checked', false); 
     }
 });

Answer 2

使用trigger将始终切换状态，因此如果检查了某些元素而某些元素未被检查，那么它将无法正常工作。

相反，你可以尝试像

这样的东西

$(document).on('click', '.selectAllcountry', function(e) {
  var $checks = $('.chkCountry');
  $checks.prop('checked', !$checks.is(':checked'))

  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
  <span class="countrySelect_lngTrans_Translatable" title="Select       All">
                <input type="button" class="selectAllcountry" />
            </span>
  <span class="displayData">Select whole country</span>
</div>
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />

Answer 3

试试这个......

    $(document).on('click', 'input.selectAllcountry', function(e) {
        if ($('input.selectAllcountry').is(':checked'))
    {
        $('.chkCountry').prop('checked',true);
    }
    else
    $('.chkCountry').prop('checked',false);

});

Answer 4

var chkStatus = true;
$('.selectAllcountry').click(function() {
  $('.countryAll').find(':checkbox').prop('checked', chkStatus);
  chkStatus = !chkStatus;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
  <span class="countrySelect_lngTrans_Translatable" title="Select All">
                <input type="button" class="selectAllcountry" />
            </span>
  <span class="displayData">Select whole country</span>
  <br>
  <br>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
</div>

Answer 5

当你完成选择的部分时，现在专注于取消选择一次删除所有复选框输入

 $('input:checkbox').removeAttr('checked');

或者您可以将类添加为标识符，然后在类的基础上删除checked元素为了exa。

$('.chkCountry').removeAttr('checked');

如何在javascript中单击按钮选择和取消选中多个复选框

5 个答案: