Question

目前我正在研究一个小的jQuery元素。我有两个主要的复选框：ja和nee。选中其中一个框时，将打开一个子菜单，并根据您检查的主要复选框（ja或nee）填写子菜单中的复选框。这很好。

在子菜单中，用户可以使用初始点击填充的复选框集选择ja或nee。我遇到的问题是，当用户首先检查主复选框为“nee”然后将子菜单中的复选框更改为“ja”时，主复选框保持为“nee”。

所以我想我可以使用if / else语句解决这个问题，但我无法弄清楚如何做到这一点。我这么做是为了让所有的复选框都有一个状态为“已选中”或没有状态，如果没有选中，它们也有类（“ja”和“no”）。

这是我现在使用的jQuery代码

$('.open_sub_ja').click(function () {
                $(this).parents('.container_vragen').find('.ja').attr('checked', this.checked);
                $(this).parents('.container_vragen').find('.nee').removeAttr('checked');
            });

            $('.open_sub_nee').click(function () {
                $(this).parents('.container_vragen').find('.ja').removeAttr('checked');
                $(this).parents('.container_vragen').find('.nee').attr('checked', this.checked);
            });

                $('.ja').click(function () {
                    $(this).parents('.antwoorden').find('.ja').attr('checked', this.checked);
                    $(this).parents('.antwoorden').find('.nee').removeAttr('checked');
                });

                $('.nee').click(function () {
                    $(this).parents('.antwoorden').find('.ja').removeAttr('checked');
                    $(this).parents('.antwoorden').find('.nee').attr('checked', this.checked);
                });

这里可以找到一个小jsFiddle http://jsfiddle.net/Macjm/。任何帮助都很有用，因为我对if / else语句知之甚少。

Answer 1

这里有两个问题：

您需要能够跟踪相对于子菜单的其他已检查ja或nee输入检查的ja或nee输入
当计数等于子菜单ja或nee输入的数量时，您需要能够检查父ja或nee输入

这样做的一种方法是使用一些变量和一些额外的检查。

我将在此处介绍ja输入的情况。 nee输入使用相同的过程。

开始在.ja点击功能中，我在现有代码后添加了两个变量：

var _ja = $(this).parents('.submenu').find('.ja');
var _jaCount = 0;

_ja是所有子菜单ja输入的jquery对象。 _jaCount是一个变量，用于跟踪检查了多少ja个输入。

然后我做这样的检查：

_ja.each(function(){
    if($(this).prop('checked') == true){
        _jaCount++;
    }
});

在这里，我遍历所有子菜单ja输入并检查它们是否被选中。如果他们是我将我的coutner增加1。

在此检查之后，我有以下声明：

if(_jaCount == _ja.length){
    $('.open_sub_ja').prop('checked',true);
    $('.open_sub_nee').prop('checked',false);
}else{
    $('.open_sub_ja').prop('checked',false);
    $('.open_sub_nee').prop('checked',false);
}

这样做是检查计数是否等于子菜单中ja输入的数量。如果是，则将paret ja输入设置为选中，将父nee输入设置为未选中。此外，如果计数不相等，则会将两个父项设置为未选中状态，因为这样您就会处于混合状态。如果这不合适，那么你只需删除else案例。

通过这种方式，您可以将子语境ja输入状态链接到父状态。

Here is a modified version of your fiddle.

选中/取消选中复选框，具体取决于选中的复选框（if / else）

1 个答案: