選擇帶觸發器的所有複選框 - jquery

Question

在我的SelectAll複選框上單擊觸發器應該適用於所有輸入 - 其上有點擊事件。

觸發器工作在selectall上，但取消選中selectall不工作。它didnt全部取消輸入

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

下面我所做過

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

以上Jquery的工作全選/ UN-選擇所有複選框 - 如果我刪除以下觸發器，它的工作原理

$(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才能觸發 - total_select函數

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

我試過很多：

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

，但仍無法正常工作，它不檢查「全選」所有的輸入，並觸發total_select功能與正確的結果，但是當我做不選上「全選」 /取消我的輸入無法取消選擇/取消選中

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*事件屬性來解決您的問題。

首先，您可以指定每個.checkBoxClass自己的change事件處理程序，然後可以從您放置在元素上的某些data屬性讀取元數據。

然後，可以簡化選擇所有邏輯，以檢查/取消選中所有這些元素，同時觸發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