[英]jQuery checkbox checked state changed event
我希望在选中/取消选中复选框时触发客户端的事件:
$('.checkbox').click(function() {
if ($(this).is(':checked')) {
// Do stuff
}
});
基本上我希望它发生在页面上的每个复选框上。 这种点击触发并检查状态的方法可以吗?
我在想一定有一个更干净的 jQuery 方式。 有人知道解决方案吗?
绑定到change
事件而不是click
。 但是,您可能仍需要检查复选框是否被选中:
$(".checkbox").change(function() {
if(this.checked) {
//Do stuff
}
});
与
click
事件相比,绑定到
change
事件的主要好处是,并非所有对复选框的点击都会导致它更改状态。
如果您只想捕获导致复选框更改状态的事件,则需要恰当命名的
已在评论中编辑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 在上面回答。
BTW input[type='checkbox']:checked
是 CSS 选择器。
很简单,我是这样使用的:
查询:
$(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');
}
});
问候!
$(document).ready(function () {
$(document).on('change', 'input[Id="chkproperty"]', function (e) {
alert($(this).val());
});
});
这是要找到的解决方案是复选框是否被选中。 使用#prop() 函数//
$("#c_checkbox").on('change', function () {
if ($(this).prop('checked')) {
// do stuff//
}
});
也可以如下实现。 当复选框被触发时,带有#checkbox id 的 div 或控件被隐藏或以其他方式显示。
<script>
$('#checkbox').on('click',function(){
if(this.checked){
$('#checkbox').hide();
}else{
$('#checkbox').show();
}
});
</script>
基于事件(点击事件)采取的行动。
$('#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();
}
也许这可能是您的替代方案。
<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`
试试这个 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>
试试这种小型 JS 项目可以接受的“html-approach”
function msg(animal,is) { console.log(animal, is.checked); // Do stuff }
<input type="checkbox" oninput="msg('dog', this)" />Do you have a dog? <br> <input type="checkbox" oninput="msg('frog',this)" />Do you have a frog?<br> ...
关键是:使用prop
而不是attr
来查询checked
状态,例如
jQuery('#my_check_tag').prop('checked') // return correct status
jQuery('#my_check_tag').attr('checked') // always return undefined
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.