如何通过javascript中的按钮点击来选择和取消选择多个复选框

How to select and deselect multiple check box with a button click in javascript

本文关键字：选择 取消 复选框 javascript 何通过 按钮      更新时间：2024-01-23

在我的项目中，我有多个复选框（共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();
});

使用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" />

试试这个

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

试试这个。。。。

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


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>

在完成选择部分后，现在将重点放在取消选择上
一次删除所有复选框输入

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

也可以添加类作为标识符，然后根据类删除选中的元素
例如。

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

我认为您在代码中犯了一个错误——在html标记中使用了class属性twise。我认为这就是为什么它采用第一类属性而忽略其他属性的原因。

<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>

请将所有类组合在一个类属性中。我认为这会有帮助。

相关文章：