Флажок jQuery проверил состояние измененного события


629

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

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

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

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


есть ли необходимость задать этот вопрос еще раз, когда в stackoverflow существует такой же вопрос, получивший
наибольшее количество голосов

28
@Arif Я не думаю, что они являются дубликатами, потому что связанный вопрос касается получения состояния флажка, в то время как этот вопрос о проверенном событии.
Рейчел

1
Мне всегда нужно искать это проверенное свойство, есть много способов добиться этого, как написано здесь
user3199690

Ответы:


1230

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

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

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

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

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

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

$(":checkbox")

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

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

1
На самом деле, я нашел галочку в классе. Есть ли лучший способ получить все флажки независимо от класса?
AnonyMouse

4
@AnonyMouse - см. Мое редактирование. Есть несколько способов сделать это.
Джеймс Аллардис

18
@Vigrond - На самом деле, щелчок метки действительно вызывает событие щелчка на соответствующем элементе управления: jsfiddle.net/ZFG84
Джеймс Аллардике

4
Это намного чище, чем $(this).is(':checked'). Я подумал, что вам нужно использовать это changeсобытие, если вы хотите обнаружить изменения с клавиатуры (вкладки, пробелы), но, что удивительно, clickтакже обнаруживает изменения, которые происходят не щелчком мыши, не уверен, что это jQuery, jsfiddle.net / mendesjuan / E39sz
Хуан Мендес

41
Пожалуйста , обратите внимание: Binding любое событие click, changeили что - то для всех флажков на странице может вызвать проблемы с производительностью (depepending на сумму флажков). Попробуйте связать с родительским элементом или документом и захватить $('form').on('change', ':checkbox', function(){ //stuff });
всплывающее

109

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

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


23

Просто другое решение

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

4
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, повышает его долгосрочную ценность.
JAL

12

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

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

    })
})

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

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

    })
})

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

Кстати input[type='checkbox']:checked, CSS-селектор.


Что делать, если вы хотите найти только не отмеченные флажки? У меня есть это для всех проверенных $ ("# tableUSNW tbody tr td [id = td1]: checkbox: флажок"); но я не знаю, как найти все непроверенные.
FrenkyB

1
@FrenkyB попробуйте следующее:$("input[type='checkbox']:not(:checked)")
Матас Вайткявичюс


3

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

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

в этом случае событие 'click' не работает. на «изменение» работает.
Mehmood Memon

2

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

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

2

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

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

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

С уважением!

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.