Question

我有一个表单，并且在该表单中我有许多复选框，并且复选框被分类为2类别，当我选择一个类别时，其所有子类别复选框都会自动选中，我使用提交按钮作为过滤器根据过滤选项选择chekbox。

对于Ex： - 我有复选框

                               1]Alcoholic Drinks
                               2]--Beer 
                               3]--Rum
                               4]--Whiskey
                               5]Non Alcoholic Drinks
                               6]--Coffee
                               7]--Tea
                               8]--Juice

我正在使用jquery自动选中复选框。假设用户在Alcoholic上打勾，然后自动选择其子选项。

我的代码： -

        $('#Alcoholic').click(function() 
             {                                    

                  if( $(this).attr("checked"))
                 {  

                   $(this).parents('.min-form').find('label.Beer').removeClass('checked'); 
                   $(this).parents('.min-form').find('label.Wine').removeClass('checked'); 
                   $(this).parents('.min-form').find('label.Spirits').removeClass('checked'); 

                 }
                    else 
                 { 

                    $(this).parents('.min-form').find('label.Beer').addClass('checked');
                    $(this).parents('.min-form').find('label.Wine').addClass('checked');                   
                    $(this).parents('.min-form').find('label.Spirits').addClass('checked'); 
                 }                
                  return false; 
             });

当我检查酒精及其子复选框被自动选中。我的问题是，当我提交没有任何操作的表单时，复选框会自动取消选中。我不知道这是怎么回事？当我提交表单标签中没有任何操作的表单时，为什么复选框会自动取消选中？

Answer 1

当您在表单中没有任何操作时，它只会重新加载页面 - 因此空的复选框。如果你添加

return false;

单击提交按钮时，对于您的编码，它将使表单从提交（到无）以及刷新页面。

Answer 2

从您的代码开始，您似乎是jQuery开发的初学者。我的建议是遵循以下流程将类添加到顶级类别chechbox class="top"
和子类别复选框添加class="sub"

$(".top").click(function(){
    if($(this).is(':checked'))
    {
        $(this).find('.sub').attr('checked',true);
    }
    else
    {
        $(this).find('.sub').attr('checked',false);
    }
});

您需要确保如果未选中任何子类别复选框，则还必须取消选中父类别为此，您需要处理具有class="sub" br /＆gt;的复选框的点击事件。希望这个有效!! :)确保有return false;

为什么在我提交表单时自动取消选中复选框？

2 个答案: