Question jQuery checkbox état vérifié événement modifié


Je veux qu'un événement déclenche le côté client lorsqu'une case est cochée / décochée:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

Fondamentalement, je veux que cela se produise pour chaque case à cocher sur la page. Est-ce que cette méthode de tir sur le clic et vérifier l'état ok?

Je pense qu'il doit y avoir une manière plus propre de jQuery. Quelqu'un connaît une solution?


506
2017-12-07 22:03


origine


Réponses:


Lié à la change événement au lieu de click. Toutefois, vous devrez probablement vérifier si la case est cochée ou non:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Le principal avantage de la consolidation du change événement sur le click l'événement est que tous les clics sur une case à cocher ne le feront pas changer d'état. Si vous voulez seulement capturer des événements qui provoquent la case à cocher pour changer d'état, vous voulez que le nom soit bien nommé change un événement.  Expurgé dans les commentaires

Notez également que j'ai utilisé this.checked au lieu d'encapsuler l'élément dans un objet jQuery et d'utiliser les méthodes jQuery, simplement parce qu'il est plus court et plus rapide d'accéder directement à la propriété de l'élément DOM.

modifier (voir les commentaires)

Pour obtenir toutes les cases à cocher, vous avez deux options. Vous pouvez utiliser le :checkbox pseudo-sélecteur:

$(":checkbox")

Ou vous pourriez utiliser un attribut est égal sélecteur:

$("input[type='checkbox']")

1002
2017-12-07 22:04



Pour toute référence ultérieure à toute personne rencontrant des difficultés, si vous ajoutez les cases à cocher de manière dynamique, la réponse correcte ci-dessus ne fonctionnera pas. Vous devrez tirer parti de délégation d'événement ce qui permet à un noeud parent de capturer des événements bulles d'un descendant spécifique et d'émettre un rappel.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

Notez qu'il est presque toujours inutile d'utiliser document pour le sélecteur parent. Au lieu de cela, choisissez un nœud parent plus spécifique pour empêcher la propagation de l'événement sur trop de niveaux.

L'exemple ci-dessous montre comment les événements des nœuds dom ajoutés dynamiquement ne déclenchent pas les écouteurs précédemment définis.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Alors que cet exemple affiche l'utilisation de la délégation d'événements pour capturer des événements pour un nœud spécifique (h1 dans ce cas), et émettre un rappel pour de tels événements.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>


82
2017-08-17 22:41



Juste une autre solution

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

18
2017-12-10 16:42



Si votre intention est d'attacher l'événement seulement sur les cases à cocher cochées (donc il se déclencherait quand elles sont décochées et vérifiées plus tard), alors c'est ce que vous voulez.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

si vous avez l'intention de joindre un événement à toutes les cases (cochées et non cochées)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

Si vous voulez que le feu se déclenche seulement quand ils sont vérifiés (à partir de non cochée) alors @James Allardice répondre ci-dessus.

BTW input[type='checkbox']:checked est un sélecteur CSS.


11
2018-05-19 08:33



$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

1
2017-10-04 07:49



peut-être que cela pourrait être une alternative pour vous.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

0
2018-04-30 18:03



Prise d'action basée sur un événement (événement sur clic).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Sans événement prenant des mesures basées sur l'état actuel.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

0
2018-04-16 09:47



Essayez cette validation jQuery

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>


0
2018-05-17 06:09