ボタンで複数のチェックボックスを選択して解除する方法

Question

私のプロジェクトでは、複数のチェックボックス（合計27個）があります.1回のクリックですべてのチェックボックスを選択しようとしています。同じボタンをクリックして同じチェックボックスの選択を解除したいのですが、ボタンはセレクタとセレクタのように動作するはずです。ボタンの代わりにチェックボックスを使用することはできません。 私のhtmlコードは次のとおりです。JSで

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

：

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

Answer 1

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

これを試してみてください....

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

}); 

Answer 3

この

$('.selectAllcountry').on('click', function(){ 
    if ($('.selectAllcountry').is(':checked')) {  
     $('.chkCountry').find(':checkbox').prop('checked', true); 
    } else { 
     $('.chkCountry').find(':checkbox').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'); 

で、すべてのチェックボックスの入力を削除するか、識別子としてクラスを追加し、クラスに基づいて確認要素を削除することができます。
for exa。

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

Answer 6

私はそれが最初のクラス属性を取得し、他は無視されている理由はだと思うあなたは、HTML tag.Iにクラス属性twiseを使用しているあなたは、あなたのコード内で1つのミスをしたと思います。

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

単一クラス属性のすべてのクラスを組み合わせてください。 私はそれが役に立つと思う。