|
Сообщение от Zuko
|
|
как сделать так, чтобы при выделении родительского чекбокса автоматически выделялись все вложенные?
|
Например так...
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('#button-del').click(function(){
$('#lasttree :checked').each(function(){
var o=this.parentNode.parentNode;
o.parentNode.removeChild(o);
});
});
$(':checkbox').click(function(){
$(this.parentNode.parentNode).find(':checkbox').prop('checked',this.checked);
var oli=$('li');
for (var i=oli.length; i>0; i--) {
var o=oli.eq(i-1);
var n=o.find('ul > li :checkbox').length;
if (n>0) {
var ok=o.find('ul > li :checked').length;
o.children('p').find(':checkbox').prop('checked',n==ok);
};
};
})
});
</script>
</head>
<body>
<ul class="ul-tree ul-drop" id="lasttree" style="display:block">
<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
<ul>
<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
<ul>
<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
</ul>
</li>
</ul>
</li>
<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
<ul>
<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
<ul>
<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
</ul>
</li>
</ul>
</li>
<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<input type="checkbox" id="checkbox1"/></p>
<ul>
<li><p>Aenean commodo ligula eget dolor.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Aenean massa.<input type="checkbox" id="checkbox1"/></p>
<ul>
<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<input type="checkbox" id="checkbox1"/></p></li>
<li><p>Nulla consequat massa quis enim.<input type="checkbox" id="checkbox1"/></p></li>
</ul>
</li>
</ul>
</li>
<li><p>Duis leo.<input type="checkbox" id="checkbox1"/></p></li>
</ul>
<button id="button-del">Удалить выбранные элементы</button>
</body>
</html>