下拉复选框和未选中的父元素？ [英] Dropdown checkboxes and unchecked parents element?
问题描述
我热衷于jquery，这就是为什么我要开发自己。
I'm keen on jquery and that is why I'm trying to develop myself on it.
我有一些问题要解决，但我的大脑停止了因为我的实际工作需要很多工作。
I got some issue to fix but my brain is stopped right know because of working a lot of for my real job.
您看到的链接是我开发自己的项目。我不能这样做是如何切换下拉我的复选框，其中有子ul元素。我的意思是，我想下拉我的嵌套复选框
the link that you see is my project to develop myself.but last thing I cannot do that is how to toggle dropdown my checkboxes which has got child ul elements. I mean I want to dropdown my nested checkboxs
，如果我点击父元素子元素必须检查和打开（到目前为止它还可以），但父元素不必
and if I click parent elements child elements has to be checked and opened (so far it's okay) but parent elements not has to be checked.I mean I don't want to parent element be checked if has got child.
我的代码
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li>
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
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'));
});
});
});
推荐答案
我必须承认，我仍然不是100％理解 - 可能是因为我不是英语母语，并且很难阅读复杂的问题，但我尝试：
I must confess I am still not 100% sure I understand - probably because I am not an English native speaker and have a harder time reading complicated issues, but I tried:
您可以添加一个函数来寻找儿童和集
You could add a function that looks for children and sets a class has-children if there are children:
$('.new-checkbox ul')
.find("input[type=checkbox]")
.parent()
.each(function(i, elem) {
if ($(elem).find("ul").length > 0) {
$(this).addClass('has-children');
}
});
然后添加一个CSS规则，删除那些输入> 标签，其中父< li> 具有类 has-children ：
Then add a CSS rule that takes away the artificial checkboxes on those <input> tags where the parent <li> has the class has-children set:
.new-checkbox .has-children > input[type="checkbox"]:checked + label:before {
content: " ";
}
我创建了更新的JSBin演示显示结果。
这篇关于下拉复选框和未选中的父元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
