Дерево checkbox
Здравствуйте, сделала код больше интуитивно
<ul class="shest2">
<li>1<input type="checkbox">
<li>2<input type="checkbox">
<ul class="shest2">
<li>2.1<input type="checkbox">
<ul>
<li>2.1.1<input type="checkbox">
<li>2.1.2<input type="checkbox">
</ul>
<li>2.2<input type="checkbox">
</ul>
<li>3<input type="checkbox">
</ul>
<script>
var ul = [].filter.call(document.querySelectorAll(".shest2"), function(element) {return element.tagName === "UL";});
ul.forEach(function(elementUl) {
var li = [].filter.call(elementUl.querySelectorAll("li"), function(element) {return element.parentNode == elementUl;});
li.forEach(function(elementLi) {
var main = elementLi.querySelector('[type="checkbox"]'),
all = elementLi.querySelectorAll('ul > li > [type="checkbox"]');
for(var i=0; i<all.length; i++)
all[i].onclick = function() {
var allChecked = elementLi.querySelectorAll('ul > li > [type="checkbox"]:checked').length;
main.checked = allChecked == all.length;
main.indeterminate = allChecked > 0 && allChecked < all.length;
}
main.onclick = function() {
for(var i=0; i<all.length; i++)
all[i].checked = this.checked;
}
});
});
</script>
По нему можно опускаться. То есть если нажать 2, то будут выделены 2.1 2.1.1 2.1.2 2.2 А вот подниматься проблематично. Если нажать 2.1.1 2.1.2 то не будет галочки на 2.1 Если нажать 2.2 и 2.1, то не будет галки на 2 Попробовала пойти другим путём, но получилось только с одним уровнем и как-со совсем плохо <form name="Tree">
<input type="checkbox"><ul>
<li><input type="checkbox">
<li><input type="checkbox">
<li><input type="checkbox">
</ul>
</form>
<script>
var t = document.forms.Tree;
var All = [].filter.call(t.querySelectorAll('[type="checkbox"]'), function(e) {return e;});
All.forEach(function(eAll) {
var Main = eAll.parentNode.parentNode.previousSibling;
t.onchange = function() {
if ([].every.call(document.querySelectorAll('[name="Tree"] > ul > li > [type="checkbox"]'), function(e) {return e.checked == true;})) {
Main.checked = true;
} else {
Main.checked = false;
}
}
});
</script>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
$('input:checkbox').click(function (){
var ok=this.checked;
//this.checked=!ok;
$(this).next().find('input:checkbox').each(function (){
this.checked=ok;
});
if (ok) {
$(this).parents('li').children('input:checkbox').each(function (){
this.checked=true;
});
} else {
$(this).parent().parents('li').each(function (){
if ($(this).find('input:checked').length>1) return false;
$(this).children('input:checkbox').get(0).checked=false;
});
};
});
});
</script>
</head>
<body>
<ul class="shest2">
<li>1<input type="checkbox">
</li>
<li>2<input type="checkbox">
<ul class="shest2">
<li>2.1<input type="checkbox">
<ul>
<li>2.1.1<input type="checkbox">
</li>
<li>2.1.2<input type="checkbox">
</li>
</ul>
</li>
<li>2.2<input type="checkbox">
</li>
</ul>
</li>
<li>3<input type="checkbox">
</li>
</ul>
<button>Test</button>
</body>
</html>
Это конечно макет... :D Но вроде рабочий. |
ksa, спасибо за неравнодушие. У вас если снять галку с 2.1.1, то не снимается галка с 2
Вот в итоге сделала что хотела: http://shpargalkablog.ru/2013/08/checked.html#tree Вроде неплохо получилось. |
Цитата:
|
Хм, действительно. Вчера в три ночи ковырялась, не разглядела. И ведь проверяла несколько раз, прежде чем написать сообщение!!! Прошу прощения!
|
| Часовой пояс GMT +3, время: 15:50. |