Question

我有以下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();
        }

});

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

我如何完全切换复选框ex：我选择了一个子复选框并单击主复选框 - 这将导致检查主要复选框下的每个子复选框，包括已经选中的复选框。

谢谢！

编辑：

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);
});

谢谢大家的帮助!!!!

Answer 1

尝试：

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

Answer 2

你离解决方案并不太远

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

小提琴here

Answer 3

我认为这是解决问题的方法：）

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);
});

使用jquery切换复选框状态

3 个答案: