すべてを選択するトリガーでチェックボックス - jquery

Question

私のSelectAllチェックボックスとクリックトリガでは、オンクリックイベントがすべての入力に対して機能するはずです。

トリガはselectallで機能しますが、selectallは機能しません。私はトリガー

$(document).ready(function() { 
    $("#SelectAll").click(function(){ 
      $(".checkBoxClass").trigger("click"); 
      $(".checkBoxClass").attr('checked', true); // if i remove this line then selectall for checkbox don't works    
    }); 
}); 

の下に削除した場合に動作します - すべての入力私はjQueryの選択 - すべて/ UN-選択し、すべてのチェックボックスのために働くの上に

$(document).ready(function() { 
    $("#SelectAll").click(function() { 
     $(".checkBoxClass").attr('checked', $(this).attr('checked')); 
     $(".checkBoxClass").change(function(){ 
      if (!$(this).attr("checked")){ 
       $("#SelectAll").attr("checked",false); 
      } 
     }); 
    }); 
}); 

をやってきたものを以下に

<input type="checkbox" id="SelectAll" /> 

<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox"> 

<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox"> 

<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox"> 

のチェックを外してのdidnt

しかし、私は上記のjqueryをトリガする必要があります - total_select関数

私は多くのを試してみました

：

$(".checkBoxClass").attr('checked', true).triggerHandler('click'); 
    $(".checkBoxClass").prop('checked', true).triggerHandler('click'); 

が、まだ動作していない、それは適切な結果と「のSelectAll」とトリガtotal_select機能上のすべての入力をチェックしますが、私は非選択を行う際に/「のSelectAll」にチェックを外し私の入力のどれもun-select/uncheckを受け取りません。

Answer 1

私は感謝

$(document).ready(function() { 
    $("#SelectAll").click(function(){ 
      $(".checkBoxClass").trigger("click"); 
      $(".checkBoxClass").attr('checked', true); 
      $(".checkBoxClass").attr('checked', $(this).attr('checked')); //add this line and working proper - hope will help someone 
    }); 
}); 

Answer 2

あなたはどちらも、古くなったon*イベント属性の代わりに控えめなイベントハンドラを使って問題を解決できます。

まずあなたは、あなたが要素の上に置く属性dataいくつかのメタデータを読み取ることができ、各.checkBoxClass独自のchangeイベントハンドラを割り当てることができます。

次に、選択するすべてのロジックを簡略化して、すべての要素をチェック/チェック解除し、changeイベントをトリガしてハンドラを実行することができます。あなたはjQueryのを使用しているとして、ここでは例です：

$('.checkBoxClass').change(function() { 
 
    if (!this.checked) 
 
    return; 
 
    
 
    // place total_select() logic here, and read the parameters from the elements' data() 
 
    console.log($(this).data()); 
 
}); 
 

 
$('#SelectAll').change(function() { 
 
    $('.checkBoxClass').prop('checked', this.checked).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="SelectAll" /> 
 
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" data-a="1" data-b="0.35" data-c="2700.00" type="checkbox">A 
 
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" data-a="2" data-b="0.35" data-c="2700.00" type="checkbox">B 
 
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" data-a="3" data-b="0.35" data-c="2700.00" type="checkbox">C