jQuery取消选中并选中子元素的反之亦然复选框
jquery uncheck and check and vise versa checkbox of child element
这是我的html
#This will be generated throught loop
<li class="selector">
<a>
<input type="checkbox" value="test" /> test
</a>
</li>
这是我的jquery点击事件
$('.selector').on('click', function() {
if($(this).find('input').is(':checked')){
#uncheck the checkbox
}else{
#check the checkbox
}
});
如果选中则取消选中,如果未选中,则如何检查
尝试
$(document).on('click', '.selector', function (e) {
if (!$(e.target).is('input')) {
$(this).find('input').prop('checked', function () {
return !this.checked;
});
}
});
演示:小提琴
另一种方式
$(document).on('click', '.selector', function (e) {
$(this).find('input').prop('checked', function () {
return !this.checked;
});
});
$(document).on('click', '.selector input', function (e) {
e.stopPropagation();
});
演示:小提琴
试试这个
$('.selector').on('click', function() {
var checkbox = $(this).find(':checkbox');
if($(checkbox).is(':checked')){
$(checkbox).prop('checked', false);
}else{
#check the checkbox
$(checkbox).prop('checked', true);
}
});
我不
明白你为什么要用JavaScript来做这件事。如果用户直接单击复选框,它将自动检查/取消选中自己,但是如果您在 JS 中添加代码来选中/取消选中它,这将取消默认行为,因此在您的单击处理程序中,您需要测试单击是否在.selector
中的其他地方。
Anwyay,.prop()
方法可以满足您的需求:
$('.selector').on('click', function(e) {
if (e.target.type === "checkbox") return; // do nothing if checkbox clicked directly
$(this).find("input[type=checkbox]").prop("checked", function(i,v) {
return !v; // set to opposite of current value
});
});
演示:http://jsfiddle.net/N4crP/1/
但是,如果您的目标只是允许单击文本"test"以单击该框,则不需要JavaScript,因为这是<label>
元素的作用:
<li class="selector">
<label>
<input type="checkbox" value="test" /> test
</label>
</li>
正如你在这个演示中看到的:http://jsfiddle.net/N4crP/2/- 点击文本"test"或复选框将切换当前值,没有任何JavaScript。
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- 使用jquery选中/取消选中单个复选框
- Angular JS Filter-通过3个复选框进行筛选
- 如果选中了多个复选框,如何添加事件
- Javascript复选框函数:;缺少:在属性id之后"
- 复选框禁用启用反之亦然
- jQuery取消选中并选中子元素的反之亦然复选框
- Javascript复选框取消选中其他复选框,反之亦然
- 表单与复选框输入字段,反之亦然-缺少第一个值
- jQuery逻辑的问题.如果选中了另一个复选框,则需要取消选中一个复选框,反之亦然
- 如果未选中复选框,则禁用html中的文本输入,反之亦然