[英]Nested Checkbox : Checked / Unchecked children with parent check
Hi I've got a form with nested Checkbox on three level 嗨,我有一个带有嵌套复选框的三层表单
With Jquery I need to checked/uncheked all the children when I check a parent level... and of course uncheck the parent if at least one of the children is uncheck 使用Jquery时,我需要在检查父级时检查/取消选中所有子级...当然,如果至少有一个子级处于未选中状态,则要取消选中父级。
I try but never success that's why I'm calling your help :) 我尝试但从未成功,这就是为什么我打电话给您的帮助:)
Many thanks to all 非常感谢所有人
My html code : 我的html代码:
Demo here : http://jsfiddle.net/SENV8/86/ 演示在这里: http : //jsfiddle.net/SENV8/86/
<fieldset class="floral">
<input type="checkbox" class="familybox cbox">
<label>Level 1</label>
<ul class="valuelist">
<li>
<input type="checkbox" class="cbox mainoption">
<label>Level 2</label>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" class="cbox mainoption">
<label>Level 2</label>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
</li>
</ul>
</fieldset>
EDIT : I'm here with my script: 编辑:我在这里与我的脚本:
$('.familybox').change(function() {
var getparent = $(this).closest('fieldset').attr('class');
if($('.'+getparent+' .familybox').is(':checked')){
$('.'+getparent+' .valuelist input:checkbox').prop('checked', true);
} else if($('.'+getparent+' .familybox').not(':checked')) {
$('.'+getparent+' .valuelist input:checkbox').prop('checked', false);
}
});
See I have Implemented your requirement. 请参阅我已实现您的要求。
It is needed to make some changes in HTML which I have did in JSfiddle. 正如我在JSfiddle中所做的那样,需要对HTML进行一些更改。
Total Jquery script is as follow: 总的Jquery脚本如下:
<script type="text/javascript">
$(document).ready(function () {
$.extend($.expr[':'], {
unchecked: function (obj) {
return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
}
});
$(".floral input:checkbox").live('change', function () {
$(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));
for (var i = $('.floral').find('ul').length - 1; i >= 0; i--) {
$('.floral').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
return $(this).next('ul').find('input:unchecked').length === 0 ? true : false;
});
}
});
});
</script>
To see live demo: 要观看现场演示:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.