选择带触发器的所有复选框 - 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