Javascript 下拉复选框和未选中的父元素?
我对jquery很感兴趣,这就是为什么我要在jquery上发展自己 我有一些问题要解决,但我的大脑停止了,因为我为真正的工作做了很多工作 你看到的链接是我自己开发的项目。但我不能做的最后一件事是如何切换下拉框,其中包含子ul元素。我的意思是我想放下我嵌套的复选框Javascript 下拉复选框和未选中的父元素?,javascript,jquery,html,css,checkbox,Javascript,Jquery,Html,Css,Checkbox,我对jquery很感兴趣,这就是为什么我要在jquery上发展自己 我有一些问题要解决,但我的大脑停止了,因为我为真正的工作做了很多工作 你看到的链接是我自己开发的项目。但我不能做的最后一件事是如何切换下拉框,其中包含子ul元素。我的意思是我想放下我嵌套的复选框 如果我单击父元素,则必须检查并打开子元素(到目前为止还可以),但不必检查父元素。我的意思是,如果有子元素,则不希望检查父元素 我的密码 html jquery $(document).ready(function() { $('.
如果我单击父元素,则必须检查并打开子元素(到目前为止还可以),但不必检查父元素。我的意思是,如果有子元素,则不希望检查父元素 我的密码 html jquery
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
});
我必须承认,我仍然无法100%确定自己是否理解——可能是因为我不是英语母语人士,阅读复杂问题时比较困难,但我尝试了: 您可以添加一个函数,用于查找子类并设置一个类
具有子类
,如果存在子类:
$('.new-checkbox ul')
.find("input[type=checkbox]")
.parent()
.each(function(i, elem) {
if ($(elem).find("ul").length > 0) {
$(this).addClass('has-children');
}
});
然后添加一个CSS规则,删除父
设置了类有子的那些标记上的人工复选框:
.new-checkbox .has-children > input[type="checkbox"]:checked + label:before {
content: " ";
}
我已经创建了一个显示结果的元素。“但不必检查父元素。我的意思是,如果有子元素,我不想检查父元素。”您可以重写或解释一下吗?我不明白。你能重写你的问题吗?这样的话,你就不清楚你想做什么了如果我点击父元素我的父元素和被检查的子元素但是我不想让我的父元素被检查它是否有子元素(对不起我的英语)@johannesjander所以如果我点击有子元素的父元素,它应该保持未检查状态,但是如果我单击一个没有子元素的父元素,是否应该选中?@user3398922我想为我的嵌套复选框做一个下拉列表,如下所示我很感谢你是的,完全正确,但如果我单击“标签”不需要选中,但如果我单击“标签”,则必须选中该复选框,如果我单击“第二次”复选框时复选框不工作,则复选框不能切换(选中,未选中)对不起,我不明白:/your demo link.。当我单击child checkbox时,它们没有被取消选中或再次被选中:/example:Ok,我明白你的意思了,我更新了demo:
$('.new-checkbox ul')
.find("input[type=checkbox]")
.parent()
.each(function(i, elem) {
if ($(elem).find("ul").length > 0) {
$(this).addClass('has-children');
}
});
.new-checkbox .has-children > input[type="checkbox"]:checked + label:before {
content: " ";
}