jQuery复选框选中状态更改事件

当选中/取消选中复选框时，我想要一个事件触发客户端：

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

基本上，我希望它发生在页面上的每个复选框中。这种点击触发并检查状态的方法可以吗？

我想一定有一个更干净的jQuery方式。有人知道解决方案吗？

1159123 次浏览
小开
最佳答案

绑定到change事件而不是click。但是，您可能仍然需要检查是否选中了复选框：

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

与#EYZ1事件相比，绑定到change事件的主要好处是并非所有单击复选框都会导致其更改状态。如果您只想捕获导致复选框更改状态的事件，则需要恰当命名的change事件。在评论中编辑

另请注意，我使用了this.checked而不是将元素包装在jQuery对象中并使用jQuery方法，仅仅是因为直接访问DOM元素的属性更短更快。

编辑（见评论）

要获取所有复选框，您有几个选项。您可以使用:checkbox伪选择器：

$(":checkbox")

或者你可以使用属性等于选择器：

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

如果您的意图是仅在选中的复选框上附加事件（因此当它们未选中并稍后再次选中时它会触发），那么这就是您想要的。

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


})
})

如果您的意图是将事件附加到所有复选框（选中和未选中）

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


})
})

如果您希望它仅在被检查（未检查）时触发，请在上面回答@James Allardice。

BTWinput[type='checkbox']:checked是CSS选择器。

小开

为了将来参考这里有困难的任何人，如果你是动态添加复选框，上面正确的接受的答案将不起作用。你需要利用事件委托，它允许父节点从特定后代捕获冒泡事件并发出回调。

// $(<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
}
})
小开 
$(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" />`
小开

基于事件（单击事件）采取的操作。

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

小开

这是找到复选框是否选中的解决方案。 使用#prop（）函数//

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

很简单，这是我使用的方法：

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

问候！

小开

试试这个适合小型JS项目的“html方法”

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

小开

它也可以像下面这样完成。当复选框被触发时，div 或带有#复选框id的控件被隐藏或以其他方式显示。

 <script>
$('#checkbox').on('click',function(){
if(this.checked){
$('#checkbox').hide();
}else{
$('#checkbox').show();
}
});
</script>
小开

关键是：使用prop而不是attr来查询checked状态，例如：

  • 正确：jQuery('#my_check_tag').prop('checked') // return correct status
  • 错误：jQuery('#my_check_tag').attr('checked') // always return undefined

提交答案