Я хочу, чтобы событие срабатывало на стороне клиента, когда флажок установлен/снят флажок:
$('.checkbox').click(function() {
if ($(this).is(':checked')) {
// Do stuff
}
});
В принципе, я хочу, чтобы это произошло для каждого флажка на странице. Этот метод стрельбы по щелчку и проверка состояния в порядке?
Я думаю, что должен быть более чистый способ jQuery. Кто-нибудь знает решение?
Привяжите к событию change
вместо click
. Однако вам, вероятно, еще нужно будет проверить, установлен ли флажок:
$(".checkbox").change(function() {
if(this.checked) {
//Do stuff
}
});
Основное преимущество привязки к событию Отправлено в комментарияхchange
по событию click
заключается в том, что не все клики на флажке заставят его изменить состояние. Если вы хотите только захватить события, которые вызывают изменение состояния флажка, вы хотите получить событие с меткой change
.
Также обратите внимание, что я использовал this.checked
вместо того, чтобы обертывать элемент в объекте jQuery и использовать методы jQuery, просто потому, что он быстрее и быстрее получает доступ к свойству элемента DOM.
Изменить (см. комментарии)
Чтобы получить все флажки, у вас есть несколько вариантов. Вы можете использовать псевдо-селектор :checkbox
:
$(":checkbox")
Или вы можете использовать атрибут равно:
$("input[type='checkbox']")
В будущем обратитесь к любому, у кого здесь есть трудности, если вы добавляете флажки динамически, правильный ответ выше не будет работать. Вам нужно будет использовать делегирование событий, которое позволяет родительскому node записывать события с буферизацией из определенного потомка и вызывать обратный вызов.
// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
if(this.checked) {
// checkbox is checked
}
});
Обратите внимание, что почти всегда не нужно использовать document
для родительского селектора. Вместо этого выберите более определенного родителя node, чтобы предотвратить распространение события на слишком много уровней.
В приведенном ниже примере показано, как события динамически добавленных 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>
В этом примере показано использование делегирования событий для захвата событий для определенного node (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 ответит выше.
BTW input[type='checkbox']:checked
- это селектор CSS.
$("input[type='checkbox']:not(:checked)")
$(document).ready(function () {
$(document).on('change', 'input[Id="chkproperty"]', function (e) {
alert($(this).val());
});
});
document ready
в document ready
, я не эксперт JS, но зачем вам это делать?
Попробуйте эту проверку 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>
возможно, это может быть альтернативой для вас.
<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`
Это решение найти, если флажок установлен или нет. Используйте функцию #prop()//
$("#c_checkbox").on('change', function () {
if ($(this).prop('checked')) {
// do stuff//
}
});
Действие на основе события (по событию клика).
$('#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();
}