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

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');

或者，您可以添加类作为标识符，然后在类的基础上删除选中的元素。
考试。

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

Answer 6

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

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

请将所有班级合并到一个班级属性中。 我认为这会有所帮助。