嵌套复选框:带有父母支票的已选中/未选中的孩子 [英] Nested Checkbox : Checked / Unchecked children with parent check

问题描述

我有一个带有嵌套复选框的三级表单

使用Jquery时，我在检查父级时需要检查/取消选中所有子级...当然，如果至少有一个子级处于未选中状态，则当然也要取消选中父级

我尝试但从未成功，这就是为什么我打电话给您的帮助:)

非常感谢所有人

我的html代码:

此处演示: http://jsfiddle.net/SENV8/86/

 < fieldset class ="floral">< input type ="checkbox" class ="familybox cbox"><标签>级别1</label>< ul class ="valuelist">< li>< input type ="checkbox" class ="cbox mainoption">< label>级别2</label>< ul class ="suboption">< li>< input type ="checkbox" class ="cbox"><标签>级别3</label></li></ul>< ul class ="suboption">< li>< input type ="checkbox" class ="cbox"><标签>级别3</label></li></ul></li>< li>< input type ="checkbox" class ="cbox mainoption">< label>级别2</label><ul class="suboption">< li>< input type ="checkbox" class ="cbox"><标签>级别3</label></li></ul>< ul class ="suboption">< li>< input type ="checkbox" class ="cbox"><标签>级别3</label></li></ul></li></ul></fieldset> 

我在这里用我的剧本:

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

解决方案

请参阅我已实现您的要求.

需要像我在JSfiddle中所做的那样对HTML进行一些更改.

Jquery的总脚本如下:

 < script type ="text/javascript">$(document).ready(function(){$ .extend($.expr [':']，{未选中:函数(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"));对于(var i = $('.floral').find('ul').length-1; i> == 0; i--){$('.floral').find('ul:eq('+ i +')').prev('input:checkbox').prop('checked'，function(){返回$(this).next('ul').find('input:unchecked').length === 0吗?真假;});}});});</script> 

观看现场演示:

JSFiddle

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

I try but never success that's why I'm calling your help :)

Many thanks to all

My html code :

Demo here : 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.

Total Jquery script is as follow:

<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:

JSFiddle

这篇关于嵌套复选框:带有父母支票的已选中/未选中的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！