嵌套復選框：帶有父母支票的已選中/未選中的孩子

Question

嗨，我有一個帶有嵌套復選框的三層表單

使用Jquery時，我需要在檢查父級時檢查/取消選中所有子級...當然，如果至少有一個子級處於未選中狀態，則要取消選中父級。

我嘗試但從未成功，這就是為什么我打電話給您的幫助:)

非常感謝所有人

我的html代碼：

演示在這里： 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>

編輯：我在這里與我的腳本：

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

});

Answer 1

請參閱我已實現您的要求。

正如我在JSfiddle中所做的那樣，需要對HTML進行一些更改。

總的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>

要觀看現場演示：

JSFiddle