Select All Checkbox with Trigger - jquery

Question

On my SelectAll checkbox and click trigger should work for all input - which has on-click event on it.

trigger working on selectall, but uncheck selectall not working. its didnt uncheck all input

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

Below what i have did

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

Above Jquery working for select-all / UN-select all checkbox - which works if i remove below trigger

 $(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            
     }); 
 }); 

but i need above jquery to trigger - total_select function

function total_select(id,carat,price){

  var lenChkBox = $("input[name='pid[]']:checked").length;

      if(document.getElementById("pid_"+id).checked==true) {

         total_select.s++;                                  
         document.getElementById("noofs").innerHTML=total_select.s;

          total_select.c +=carat;
          var cs = (total_select.c).toFixed(2);
          document.getElementById("carat").innerHTML=cs;

          total_select.p +=price * carat;
          avg_price_per = total_select.p/total_select.c;
          var ca = (avg_price_per).toFixed(2);

          document.getElementById("price").innerHTML="$"+ca;

    } else {
            total_select.s--;
           document.getElementById("noofs").innerHTML=total_select.s;

            total_select.c -=carat;
            cs = (total_select.c).toFixed(2);
            document.getElementById("carat").innerHTML=cs;

            total_select.p -=price * carat;
            avg_price_per = total_select.p/total_select.c;
            var ca = (avg_price_per).toFixed(2);
            document.getElementById("price").innerHTML="$"+ca;
}

i tried many :

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

but still not working , it do check all input on 'SelectAll' and trigger total_select function with proper result , but when i do un-select/uncheck on 'SelectAll' none of my input get un-select/uncheck

Answer 1

I found answer as below, but still any one have any other best solution let me know , thanks

 $(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
     }); 
 });