Casella di controllo jQuery evento stato modificato

Voglio che un evento si attivi sul lato client quando una casella è selezionata / deselezionata:

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

Fondamentalmente voglio che accada per ogni casella di controllo sulla pagina. Questo metodo di attivazione al clic e controllo dello stato è corretto?

Sto pensando che ci debba essere un modo jQuery più pulito. Qualcuno conosce una soluzione?

Associa changeall'evento anziché click. Tuttavia, probabilmente dovrai comunque verificare se la casella di controllo è selezionata o meno:

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

Il vantaggio principale dell'associazione changeall'evento rispetto clickall'evento è che non tutti i clic su una casella di controllo determinano la modifica dello stato. Se si desidera acquisire solo eventi che causano il cambio di stato della casella, si desidera l' changeevento con nome appropriato . Redatto nei commenti

Nota anche che ho usato this.checkedinvece di avvolgere l'elemento in un oggetto jQuery e usare i metodi jQuery, semplicemente perché è più breve e veloce accedere direttamente alla proprietà dell'elemento DOM.

modificare (vedi commenti)

Per ottenere tutte le caselle di controllo hai un paio di opzioni. Puoi usare lo :checkboxpseudo-selettore:

$(":checkbox")

Oppure potresti usare un attributo uguale a selettore:

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

Per riferimento futuro a chiunque qui abbia difficoltà, se si aggiungono le caselle in modo dinamico, la risposta accettata corretta sopra non funzionerà. Dovrai sfruttare la delega degli eventi che consente a un nodo padre di acquisire eventi bollati da un discendente specifico ed emettere un callback.

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

Si noti che quasi sempre non è necessario utilizzare documentper il selettore principale. Scegli invece un nodo genitore più specifico per impedire la propagazione dell'evento su troppi livelli.

L'esempio seguente mostra come gli eventi dei nodi dom aggiunti dinamicamente non attivano i listener definiti in precedenza.

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

Mentre questo esempio mostra l'uso della delega degli eventi per acquisire eventi per un nodo specifico ( h1in questo caso) ed emettere un callback per tali eventi.

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

Solo un'altra soluzione

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

Se la tua intenzione è quella di collegare un evento solo alle caselle di controllo selezionate (in modo da attivarsi quando vengono deselezionate e controllate di nuovo in seguito), questo è ciò che desideri.

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

    })
})

se la tua intenzione è quella di associare l'evento a tutte le caselle di controllo (spuntate e deselezionate)

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

    })
})

se vuoi che si attivi solo quando vengono controllati (da deselezionati) allora @James Allardice risponde sopra.

BTW input[type='checkbox']:checkedè un selettore CSS.

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

Esecuzione di azioni in base a un evento (evento al clic).

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

Senza eventi che agiscono in base allo stato corrente.

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

forse questa potrebbe essere un'alternativa per te.

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

Questa è la soluzione da trovare se la casella di controllo è selezionata o meno. Utilizzare la funzione #prop () //

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

Prova questa convalida 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>

È molto semplice, è così che uso:

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

Saluti!