0

我有以下 HTML 结构：

<ul class="cat_select">
    <li class="main_type_check">
         <div class="ez-checkbox">
              <input id="web" class="cat_check_main ez-hide" type="checkbox" name="category" value="Activities">
         </div>
         <label for="web"><b>Web</b></label>
    </li>
    <li>
         <div class="ez-checkbox">
              <input id="events" class="cat_check ez-hide" type="checkbox" name="category" value="Events">
         </div>  
        <label for="events">Events</label>
    </li>
</ul>

使用 jQuery/Javascript 我创建了以下代码：

$(".main_type_check .ez-checkbox input").click(function () {

        if($(".cat_check").is(":checked")) {
            $(this).parents(".main_type_check").siblings().find("input").removeAttr("checked");
            $(this).parents(".main_type_check").siblings().find(".ez-checkbox").removeClass("ez-checked");
            $('.what_form').submit();
        }
        else {
            $(this).parents(".main_type_check").siblings().find("input").attr("checked", "true");
            $(this).parents(".main_type_check").siblings().find(".ez-checkbox").addClass("ez-checked");
            $('.what_form').submit();
        }

});

这将切换复选框，但是如果选中一个复选框（不是主复选框），然后选中主复选框，则只会取消选中选中的子复选框并选中主复选框。其他复选框将保持不变。

我怎样才能完全切换复选框例如：我选择了一个子复选框并单击主复选框 - 这将导致检查主复选框下的每个子复选框，包括已选中的复选框。

谢谢！！

编辑：

ez-checkbox 和 ez-hide 类并由此复选框插件添加。

编辑2：

我忘了提到主要类别是由 UL 与同一类分组的cat_select。这是结构：

<ul class="cat_select">
    <li>MAIN CHECKBOX</li>
    <li>SUB CHECKBOX</li>
    <li>SUB CHECKBOX</li>
</ul>
<ul class="cat_select">
    <li>MAIN CHECKBOX</li>
    <li>SUB CHECKBOX</li>
    <li>SUB CHECKBOX</li>
</ul>
<ul class="cat_select">
    <li>MAIN CHECKBOX</li>
    <li>SUB CHECKBOX</li>
    <li>SUB CHECKBOX</li>
</ul>

最终解决方案： 

$(".main_type_check .ez-checkbox input").click(function () {
   $(this).closest('.cat_select').find('.cat_check').attr('checked', $(this).prop('checked'));
});

$(".cat_check").click(function() {
   $(this).closest('.cat_select').find('.cat_check_main').attr('checked',$(this).closest('.cat_select').find('.cat_check').not(':checked').length<=0);
});

谢谢大家的帮助！！！！

4

3 回答 3

0

尝试：

$('.cat_check_main').click(function(){
    $(this).closest('.cat_select').find('.cat_check').prop('checked', $(this).prop('checked'))
});
于 2012-11-29T10:06:48.683 回答
0

我认为这是解决您问题的方法:)

http://jsfiddle.net/mYYng/3/

$('.cat_check_main').click(function(){
    $(this).closest('.cat_select').find('.cat_check').prop('checked', $(this).prop('checked'));
});

$('#Situation1 .cat_check').click(function(){
    $(this).closest('.cat_select').find('.cat_check_main').prop('checked',$(this).closest('.cat_select').find('.cat_check').not(':checked').length<=0);
});


$('#Situation2 .cat_check').click(function(){
    $(this).closest('.cat_select').find('.cat_check_main').prop('checked',$(this).closest('.cat_select').find('.cat_check:checked').length>0);
});
于 2012-11-29T10:33:17.093 回答
0

你离解决方案不远了

$(".cat_check_main").click(function () {
    $(this).parents(".cat_select").find(".cat_check").prop("checked", this.checked );
});

在这里提琴

于 2012-11-29T10:11:35.897 回答