Pole wyboru jQuery zaznaczone zdarzenie zmieniło stan

Chcę, aby zdarzenie było uruchamiane po stronie klienta, gdy pole wyboru jest zaznaczone / niezaznaczone:

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

Zasadniczo chcę, aby tak się stało dla każdego pola wyboru na stronie. Czy ta metoda uruchamiania kliknięcia i sprawdzania stanu jest w porządku?

Myślę, że musi być czystszy sposób jQuery. Czy ktoś zna rozwiązanie?

Powiązanie z changewydarzeniem zamiast click. Jednak prawdopodobnie nadal będziesz musiał sprawdzić, czy pole wyboru jest zaznaczone:

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

Główną zaletą powiązania changezdarzenia ze clickzdarzeniem jest to, że nie wszystkie kliknięcia pola wyboru powodują zmianę stanu. Jeśli chcesz przechwytywać tylko zdarzenia, które powodują zmianę stanu pola wyboru, potrzebujesz trafnie nazwanego changezdarzenia. Zredagowane w komentarzach

Zauważ też, że użyłem this.checkedzamiast owijania elementu w obiekcie jQuery i używania metod jQuery, po prostu dlatego, że krótszy i szybszy jest bezpośredni dostęp do właściwości elementu DOM.

Edytuj (patrz komentarze)

Aby uzyskać wszystkie pola wyboru, masz kilka opcji. Możesz użyć :checkboxpseudo-selektora:

$(":checkbox")

Lub możesz użyć atrybutu równego selektorowi:

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

Jeśli w przyszłości odniesiesz się do każdego, kto ma trudności, jeśli dodasz pola wyboru dynamicznie, poprawna zaakceptowana odpowiedź powyżej nie będzie działać. Konieczne będzie wykorzystanie delegowania zdarzeń, które pozwala węzłowi nadrzędnemu na przechwycenie bąbelkowych zdarzeń od określonego potomka i wywołanie zwrotne.

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

Zauważ, że prawie zawsze nie ma potrzeby używania documentselektora rodzica. Zamiast tego wybierz bardziej szczegółowy węzeł nadrzędny, aby zapobiec propagowaniu zdarzenia na zbyt wiele poziomów.

Poniższy przykład pokazuje, w jaki sposób zdarzenia dynamicznie dodanych węzłów domen nie wyzwalają wcześniej zdefiniowanych detektorów.

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

Podczas gdy w tym przykładzie użyto delegowania zdarzeń do przechwytywania zdarzeń dla określonego węzła ( h1w tym przypadku) i wysyłania wywołania zwrotnego dla takich zdarzeń.

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

Po prostu inne rozwiązanie

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

Jeśli Twoim zamiarem jest dołączanie zdarzeń tylko do zaznaczonych pól wyboru (aby uruchomił się, gdy zostaną odznaczone i zaznaczone później), właśnie tego chcesz.

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

    })
})

jeśli zamierzasz dołączyć zdarzenie do wszystkich pól wyboru (zaznaczone i niezaznaczone)

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

    })
})

jeśli chcesz, aby strzelał tylko wtedy, gdy są sprawdzane (od niezaznaczone), to odpowiedz @James Allardice powyżej.

BTW input[type='checkbox']:checkedto selektor CSS.

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

Podejmowanie działań na podstawie zdarzenia (zdarzenie kliknięcia).

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

Bez podejmowania działań w oparciu o bieżący stan.

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

być może może to być dla ciebie alternatywa.

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

To jest rozwiązanie, aby sprawdzić, czy pole wyboru jest zaznaczone, czy nie. Użyj funkcji #prop () //

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

Wypróbuj tę weryfikację 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>

To bardzo proste, w ten sposób korzystam:

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

Pozdrowienia!