Événement de changement d'état d'une case à cocher jQuery

Question

Je veux qu'un événement soit déclenché côté client lorsqu'une case à cocher est cochée ou décochée :

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

En fait, je veux que cela se produise pour chaque case à cocher de la page. Cette méthode de déclenchement au clic et de vérification de l'état est-elle acceptable ?

Je pense qu'il doit y avoir un moyen plus propre avec JQuery. Quelqu'un connaît-il une solution ?

Answer 1

Voici la solution pour savoir si la case à cocher est cochée ou non. Utilisez la fonction #prop()//

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

Answer 2

Action basée sur un événement (événement de clic).

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

Sans événement, prendre des mesures en fonction de l'état actuel.

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

Answer 3

C'est très simple, c'est la façon que j'utilise :

JQuery :

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

Salutations !

Answer 4

Peut-être cela peut-il être une alternative pour vous.

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

Answer 5

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>