wählen - jquery

Question

Auf meinem SelectAll Checkbox und klicken Sie auf Trigger sollte für alle Eingangs arbeiten - die auf Klick Ereignis auf sie.

Trigger auf selectAll arbeiten, aber uncheck selectAll funktioniert nicht. seine nur knapp sein Ziel Auswahl aufheben Eingang

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

unter dem, was ich

tat haben

$(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 arbeiten für select-all/UN-Kontrollkästchen Alle auswählen - die, wenn i arbeitet unter Trigger entfernen

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

aber ich brauche über jquery zu triggern - total_select Funktion

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

Ich habe versucht, viele:

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

aber immer noch nicht funktioniert, es alle Eingaben auf ‚SelectAll‘ prüfe und auslösen total_select Funktion mit dem richtigen Ergebnis, aber wenn ich un-select tun/deaktivieren Sie auf ‚SelectAll‘ keiner meiner Eingabe un-select/deaktivieren

Answer 1

ich Antwort wie folgt zu finden, aber immer noch irgendeine andere beste Lösung lassen Sie mich wissen, dank

$(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

können Sie erhalten sowohl Ihr Problem lösen, indem sie unaufdringlich Event-Handler anstelle veralteter on* Event-Attribute verwenden.

Zum einen können Sie jedes .checkBoxClass seine eigene change Event-Handler zuweisen, die dann die Meta-Daten lesen kann von einigen data Attribute, die Sie auf die Elemente platzieren.

Dann kann die Select-All-Logik vereinfacht werden, um alle diese Elemente zu aktivieren/deaktivieren, während ein change-Event ausgelöst wird, um den Handler auszuführen. Wie Sie jQuery verwenden, hier ein Beispiel:

$('.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