JQuery checkbox checked состояние измененное событие

Я хочу, чтобы событие срабатывало на стороне клиента, когда флажок установлен/снят флажок:

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

В принципе, я хочу, чтобы это произошло для каждого флажка на странице. Этот метод стрельбы по щелчку и проверка состояния в порядке?

Я думаю, что должен быть более чистый способ jQuery. Кто-нибудь знает решение?

Ответ 1

Привяжите к событию change вместо click. Однако вам, вероятно, еще нужно будет проверить, установлен ли флажок:

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

Основное преимущество привязки к событию change по событию click заключается в том, что не все клики на флажке заставят его изменить состояние. Если вы хотите только захватить события, которые вызывают изменение состояния флажка, вы хотите получить событие с меткой change. Отправлено в комментариях

Также обратите внимание, что я использовал this.checked вместо того, чтобы обертывать элемент в объекте jQuery и использовать методы jQuery, просто потому, что он быстрее и быстрее получает доступ к свойству элемента DOM.

Изменить (см. комментарии)

Чтобы получить все флажки, у вас есть несколько вариантов. Вы можете использовать псевдо-селектор :checkbox:

$(":checkbox")

Или вы можете использовать атрибут равно:

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

Ответ 2

Если в будущем у вас возникнут трудности, если вы добавляете флажки динамически, правильный принятый ответ выше не будет работать. Вам нужно будет использовать делегирование событий, которое позволяет родительскому узлу захватывать всплывающие события от определенного потомка и выполнять обратный вызов.

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

Обратите внимание, что почти всегда нет необходимости использовать document для родительского селектора. Вместо этого выберите более конкретный родительский узел, чтобы предотвратить распространение события на слишком большое количество уровней.

В приведенном ниже примере показано, как события динамически добавляемых dom-узлов не вызывают ранее определенных слушателей.

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

Ответ 3

Еще одно решение

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

Ответ 4

Если вы намерены присоединить событие только к установленным флажкам (чтобы он срабатывал, когда они были сняты и снова проверены), тогда это то, что вы хотите.

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

    })
})

если вы намерены присоединить событие ко всем флажкам (отмечены и не отмечены)

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

    })
})

если вы хотите, чтобы он срабатывал только тогда, когда они проверяются (из непроверенных), тогда @James Allardice ответит выше.

BTW input[type='checkbox']:checked - это селектор CSS.

Ответ 5

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

Ответ 6

Действие на основе события (по событию клика).

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

Без принятия мер в зависимости от текущего состояния.

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

Ответ 7

Это решение найти, если флажок установлен или нет. Используйте функцию #prop()//

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

Ответ 8

возможно, это может быть альтернативой для вас.

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

Ответ 9

Попробуйте эту проверку 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>

Ответ 10

Очень просто, вот как я использую:

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

Привет!