选择带触发器- jquery的所有复选框。

Question

在“我的SelectAll”复选框中，单击“触发器”应该适用于所有输入--其中有单击事件。

触发器在selectall上工作，但不检查selectall不工作。它没有取消所有输入的检查

<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工作在select-all / UN-select all复选框中，如果我删除下面的触发器，这个复选框就能工作。

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

但是仍然不起作用，它检查“SelectAll”上的所有输入，并触发具有适当结果的total_select函数，但是当我对“SelectAll”执行uncheck/取消检查时，我的输入中没有一个得到uncheck/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*事件属性来解决问题和提高代码质量。

首先，您可以为每个.checkBoxClass分配自己的change事件处理程序，然后可以从放置在元素上的一些data属性读取元数据。

然后，可以简化select all逻辑，以检查/取消检查所有这些元素，同时触发执行处理程序的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

​

Answer 3

我知道这不是一个活跃的线程，但我已经解决了一个类似的问题，我想给出一个解决方案:D

这样，只有这些复选框才会被选中或未选中，并且(从而触发)哪些具有与#SelectAll不同的#SelectAll属性。

​

$(function () {
    $('#SelectAll').click(function () {
        $('.checkBoxClass').each(function () {
            if ($(this).prop('checked') !== $('#SelectAll').prop('checked')) {
                $(this).trigger('click');
            }
        });
    });
});

function total_select(id,carat,price){
  alert(id);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ALL
<input type="checkbox" id="SelectAll" />
A
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
B
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
C
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">

<div id="result">
</div>

​