Javascript 单击jQuery以特定元素为目标的问题

我显示了一些复选框，当我们点击一个复选框时，一个包含“child”复选框的隐藏div应该会出现。例如：

但是，正如您所看到的，div是为第一项显示的，这里是最后一次访问，因为它是id为“filterInput”的第一个元素。 如果我将其设为类，则会显示所有隐藏的复选框

考虑到我使用的是具有未知字段的foreach，我可以做些什么来仅针对已单击的项目并显示隐藏的复选框

foreach ($results as $value) {


    $filterOptionsString = <<<TXT

    <label class="mainFilterOption">
        <input type="checkbox" name="{$value['mongo_db_key']}">
        {$value['mongo_db_key']}
    </label>

    <div id="filterInput">
        <input type="checkbox" name="stringIs"> is<br>
        <input type="checkbox" name="stringStartsWith"> starts with<br>
        <input type="checkbox" name="stringContains"> contains<br>
    </div>

TXT;

    echo $filterOptionsString ;

}

---

没有看到你的一些代码张贴我将不得不猜测一点

我将使事件处理程序如下所示：

$('.mainFilterOption input').on('click', function() {
    $(this).children('.hidden').toggle();
}

…其中

.hidden

是应用于隐藏子div的类。这样，无论勾选哪个框，仅该元素的子隐藏div将被切换。

确定，再次将

#filterInput

作为一个类，并执行以下操作：

$('.mainFilterOption input').on('click', function() {
    $(this).parent().next('.filterInput').toggle();
});

当您将其设置为类时，所有隐藏的复选框都会出现，因为您使用

.filterInput

选择器调用了所有元素，但我们需要使用

this

仅针对当前范围内的元素

试试这个

HTML:

<label class="mainFilterOption">
        <input type="checkbox" name="value" class="checks">
        Value
    </label>

    <div id="filterInput">
        <input type="checkbox" name="stringIs"> is<br>
        <input type="checkbox" name="stringStartsWith"> starts with<br>
        <input type="checkbox" name="stringContains"> contains<br>
    </div>

价值
是

以

包含

脚本：

$（文档）.ready（函数（）{ $（'#filterInput'）.hide（）； $（document）.on（'change'，'checks'，function（）{ $（this.parent（）.next（“#filterInput”）.toggle（）； }); });

---

希望它能有所帮助

尝试将foreach的内容包装成一个块：

foreach ($results as $value) {
    $filterOptionsString = <<<TXT
    <div class="filterBlock">
        <label class="mainFilterOption">
            <input type="checkbox" name="{$value['mongo_db_key']}">
            {$value['mongo_db_key']}
        </label>

        <div class="filterInput">
            <input type="checkbox" name="stringIs"> is<br>
            <input type="checkbox" name="stringStartsWith"> starts with<br>
            <input type="checkbox" name="stringContains"> contains<br>
        </div>
    </div>
TXT;

    echo $filterOptionsString ;

}

所有这些都会遍历DOM，找到filterBlock类的第一个div（或li，或ul等），然后找到要取消隐藏的子元素

---

注意，我已将filterInput转换为一个类而不是一个id，因此每页可以有多个。如果我理解正确，您将需要执行以下操作：

我使用的代码：

$('.mainFilterOption input').on('click', function() {
    $(this).parent().next('.filterInput').toggle();
});

---

此代码将获取所有输入并应用onClick事件。一旦对输入触发onClick事件，它将跳到下一个。filterInput最初将css设置为：

#filterInput{    
    display:none;
}

然后检查复选框事件

$(function(){

            $('.mainFilterOption').on('click', function() {
                if($('input:checkbox[name=demo]').is(':checked')){
                    $('#filterInput').css('display','block');
                }else{
                 $('#filterInput').css('display','none');
                }

            });

        });

工作示例：

---

本以为看到它时它会起作用，但没有。下一个答案有效。谢谢你的回答。

#filterInput{    
    display:none;
}

$(function(){

            $('.mainFilterOption').on('click', function() {
                if($('input:checkbox[name=demo]').is(':checked')){
                    $('#filterInput').css('display','block');
                }else{
                 $('#filterInput').css('display','none');
                }

            });

        });