下拉复选框和未选中的父元素？

我热衷于jquery，这就是为什么我要努力发展自己。

我有一些问题需要解决，但我的大脑因为我的实际工作而大量工作而被停止了。

demo

你看到的链接是我开发自己的项目。但最后我不能做的是如何切换下拉我的复选框，它有了孩子的ul元素。 我的意思是我想下拉嵌套的复选框

如果我单击父元素必须检查并打开子元素（到目前为止它没关系），但不必检查父元素。我的意思是我不想检查父元素是否有子元素。

我的代码

HTML

       
 
 
  kategori (1)  
 
  kategori(11)  
 
  kategori (12)  
 
  kategori (13)  
 
 
 
  kategori (2)  
 
  kategori (3)  
 
  kategori (31)  
 
  kategori (32)  
 
  kategori (33)  
 
  kategori (331)  
 
  kategori (332)  
 
  kategori (333)  
 
 
 
 
 
 
    

CSS

 .new-checkbox ul { padding: 0; margin: 0; list-style: none; margin-left: 30px; font: normal 11px/16px"Segoe UI", Arial, Sans-serif; } .new-checkbox ul:first-child { margin-left: 0; } .new-checkbox ul li { margin: 3px 0; } .new-checkbox input[type="checkbox"] { display: none; } .new-checkbox label { cursor: pointer; } .new-checkbox input[type="checkbox"] + label:before { border: 1px solid #ffffff; content: "\00a0"; display: inline-block; font: 16px/1em sans-serif; height: 13px; width: 13px; margin: 2px .25em 0 0; padding: 0; vertical-align: top; border: solid 1px #1375b3; color: #1375b3; opacity: .50; } .new-checkbox input[type="checkbox"]:checked + label:before { background: #fff; color: #1375b3; content: "\2714"; text-align: center; box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset; opacity: 1; } .new-checkbox input[type="checkbox"]:checked + label:after { font-weight: bold; } .new-checkbox ul li:before { content: "\25b6"; display: inline-block; margin: 2px 0 0; width: 13px; height: 13px; vertical-align: top; text-align: center; color: #e74c3c; font-size: 8px; line-height: 13px; cursor: pointer; } .new-checkbox li { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .new-checkbox input[type="checkbox"][id]:checked ~ li::before { content: "\25bc"; } .new-checkbox li ul { display: none; } .new-checkbox li.has-checked > ul { display: block; } .addDownicon li::before { content: "\25bc" !important; } 

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

Answer 1

我必须承认我仍然不是100％肯定我理解 – 可能是因为我不是英语母语人士并且在阅读复杂问题时遇到的困难，但我尝试过：

您可以添加一个查找子项的函数，如果有子项，则设置一个类has-children children：

 $('.new-checkbox ul') .find("input[type=checkbox]") .parent() .each(function(i, elem) { if ($(elem).find("ul").length > 0) { $(this).addClass('has-children'); } }); 

然后添加一个CSS规则，它取消那些标签上的人工复选框，其中父

具有类has-children设置：

 .new-checkbox .has-children > input[type="checkbox"]:checked + label:before { content: " "; } 

我创建了一个更新的JSBin演示 ，显示结果。