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

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

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

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

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

+593
источник поделиться
10 ответов

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

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

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

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

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

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

$(":checkbox")

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

$("input[type='checkbox']")
+1164
источник

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

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

Хотя в этом примере показано использование делегирования событий для захвата событий для определенного узла (в данном случае h1) и выдачи обратного вызова для таких событий.

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

+99
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})
+22
источник

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

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

    })
})

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

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

    })
})

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

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

+12
источник
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});
+5
источник

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

$('#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();
}
+2
источник

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

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });
+2
источник

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

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`
+1
источник

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

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

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

Привет!

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос