Pole wyboru jQuery zaznaczone zdarzenie zmieniło stan


628

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?


czy trzeba ponownie zadać to pytanie, w którym istnieje bardzo samo głosowane pytanie w stackoverflow .... stackoverflow.com/questions/901712/…
Ariful Islam

28
@Arif Nie sądzę, że są duplikatami, ponieważ połączone pytanie dotyczy uzyskania stanu pola wyboru, podczas gdy to dotyczy sprawdzonego zdarzenia.
Rachel

1
Zawsze muszę szukać tej zaznaczonej właściwości, istnieje wiele sposobów na osiągnięcie tego, jak napisano tutaj
3199690

Odpowiedzi:


1228

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']")

1
Właściwie to szukam pola wyboru przez klasę. Czy istnieje lepszy sposób na uzyskanie wszystkich pól wyboru niezależnie od klasy?
AnonyMouse

4
@AnonyMouse - Zobacz moją edycję. Można to zrobić na kilka sposobów.
James Allardice

18
@Vigrond - W rzeczywistości kliknięcie etykiety powoduje zdarzenie kliknięcia w powiązanej kontrolce
James Allardice

4
To jest o wiele czystsze niż $(this).is(':checked'). Pomyślałem, że musisz użyć changezdarzenia, jeśli chcesz wykryć zmiany z klawiatury (tabulacja, uderzenie spacji), ale, co zaskakujące, clickwykrywa również zmiany, które nie są kliknięciem myszy, nie jestem pewien, czy to jQuery, jsfiddle.net / mendesjuan / E39sz
Juan Mendes

41
Uwaga: Oprawa dowolne zdarzenie click, changeczy cokolwiek innego do wyboru na wszystkie strony mogą powodować problemy z wydajnością (depepending na wysokości pola wyboru). Spróbuj $('form').on('change', ':checkbox', function(){ //stuff });
powiązać

108

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>


23

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

4
Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, dlaczego i / lub jak ten kod odpowiada na pytanie, poprawia jego długoterminową wartość.
JAL,

12

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.


Co jeśli chcesz znaleźć tylko niezaznaczone pola wyboru? Mam to dla wszystkich zaznaczonych $ ("# tableUSNW tbody tr td [id = td1]: checkbox: zaznaczony"); ale nie wiem, jak znaleźć wszystkie niezaznaczone.
FrenkyB,

1
@FrenkyB spróbuj wykonać następujące czynności:$("input[type='checkbox']:not(:checked)")
Matas Vaitkevicius

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

3

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

zdarzenie „kliknięcie” nie działa w tym przypadku. przy „zmianie” działa.
Mehmood Memon

2

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" />`

2

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

1

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>


1

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!

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.