Question

我正在显示一些复选框，当我们点击一个复选框时，应该会出现一个包含“子”复选框的隐藏div。例如：http://screencast.com/t/BJ8BrkeS0i

然而，正如您所看到的，div显示为第一个项目，此处为last_visit，因为它是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() {
    $('#filterInput').toggle();
});

Answer 1

好的，再次将#filterInput作为一个班级并执行此操作：

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

当你把它作为一个类时，所有隐藏的复选框都出现了，因为你使用.filterInput选择器调用所有元素，但是我们需要使用this仅定位当前范围中的元素。

FIDDLE DEMO

Answer 2

最初将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');
                }

            });

        });

工作示例：

http://jsfiddle.net/afsar_zan/WBUMx/

Answer 3

如果没有看到你发布的一些代码，我将不得不猜测一下。

我会像这样制作事件处理程序：

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

...其中.hidden是您用来隐藏子div的类。这样一来，无论选中哪个方框，子项隐藏<仅>的div 都会被切换。

Answer 4

试试这个

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>

脚本：

（文档）$。就绪（函数（）{ $（ '＃filterInput'）隐藏（）。 $（document）.on（'change'，'。checks'，function（）{ 。$（本）.parent（）未来（ '＃filterInput'）切换（）; }）; }）;

example

希望它会有所帮助

Answer 5

尝试在一个块中包装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 ;

}

然后你可以这样修改你的jQuery：

$('.mainFilterOption input').on('click', function() {
    $(this).parents('.filterBlock').find('.filterInput').toggle();
});

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

请注意，我已将filterInput转换为类而不是ID，因此每页可以有多个。

Answer 6

如果我理解正确，你会想做这样的事情：JSFIDDLE

我使用的代码：

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

此代码将获取所有输入并应用onClick事件。一旦在输入上触发了onClick事件，它就会跳转到下一个.filterInput

点击时使用jQuery定位特定元素的问题

6 个答案: