web-dev-qa-db-fra.com

Comment déclencher un événement de case à cocher même s'il est coché avec du code Javascript?

J'ai beaucoup de cases à cocher dans ma page et il y a une case à cocher Tout sélectionner qui coche toutes les cases à cocher. D'une manière ou d'une autre, je veux émuler cet événement de clic même s'il est coché/décoché via le bouton Tout sélectionner. Comment puis-je le faire?

javascriptjquerycheckboxdom-events
69
Jishnu A P

Vous pouvez utiliser la méthode jQuery .trigger(). Voir http://api.jquery.com/trigger/

Par exemple.:

$('#foo').trigger('click');
99
Mark Robinson

Obtenir le statut de vérification

var checked = $("#selectall").is(":checked");

Puis pour le réglage

$("input:checkbox").attr("checked",checked);
13
Harish

Vous pouvez aussi utiliser la fonction .change()

Par exemple.:

$('form input[type=checkbox]').change(function() { console.log('hello') });
8
silviomoreto

pas de gQuery

document.getElementById ('your_box'). onclick ();

J'ai utilisé certaines classes sur mes cases à cocher.

var x = document.getElementsByClassName("box_class");
var i;
for (i = 0; i < x.length; i++) {
    if(x[i].checked) x[i].checked = false;
    else x[i].checked = true;
    x[i].onclick();
   }
5
Harijs Krūtainis

La fonction de déclenchement de jQuery pourrait être votre réponse.

Les documents jQuery disent: Tous les gestionnaires d'événements attachés avec .on () ou l'une de ses méthodes de raccourci sont déclenchés lorsque l'événement correspondant se produit. Ils peuvent toutefois être activés manuellement avec la méthode .trigger (). Un appel à .trigger () exécute les gestionnaires dans le même ordre que si l'événement était déclenché naturellement par l'utilisateur

Ainsi, la meilleure solution en une ligne devrait être:

$('.selector_class').trigger('click');

//or

$('#foo').click();
3
user4466709

Vous pouvez également l'utiliser, j'espère que vous pourrez les servir.

$(function(){
  $('#elements input[type="checkbox"]').prop("checked", true).trigger("change");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="elements">
  <input type="checkbox" id="item-1" value="1"> Item 1 <br />
  <input type="checkbox" id="item-2" value="2" disabled> Item 2 <br /> 
  <input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />
  <input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />
  <input type="checkbox" id="item-5" value="5"> Item 5
</div>
2
Learning and sharing
  $("#gst_show>input").change(function(){

    var checked = $(this).is(":checked");
    if($("#gst_show>input:checkbox").attr("checked",checked)){
      alert('Checked Successfully');
    }

  });
0
Raj Shekhar