jQuery флажок состояние изменено событие

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

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

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

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

8 ответов


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

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

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

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

редактировать (см. комментарии)

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

$(":checkbox")

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

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

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

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

просто еще одно решение

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

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

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

    })
})

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

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

    })
})

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

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


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

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

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

действие основано на мероприятие (событие click).

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

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