0

我正在显示几个复选框，当我们单击一个复选框时，应该会出现一个包含“子”复选框的隐藏 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();
});
4

6 回答 6

1

好的，#filterInput再次创建一个类并执行以下操作：

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

当您将其作为一个类时，所有隐藏的复选框都会出现，因为您使用.filterInput选择器调用所有元素，但我们需要使用this.

小提琴演示

于 2013-07-16T05:11:03.820 回答
1

最初将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/WBUx/

于 2013-07-16T05:24:16.490 回答
0

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

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

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

....hidden您申请隐藏子 div 的类在哪里。这样，无论选中哪个框，都只会切换该元素的子隐藏 div。

于 2013-07-16T05:07:56.397 回答
0

试试这个

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>

脚本 ：

$(document).ready(function(){ $('#filterInput').hide(); $(document).on('change','.checks', function(){ $(this).parent( ).next('#filterInput').toggle(); }); });

例子

希望它会有所帮助

于 2013-07-16T05:15:54.757 回答
0

尝试将 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，因此每页可以有多个。

于 2013-07-16T05:16:48.960 回答
0

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

我使用的代码：

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

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

于 2013-07-16T05:22:14.513 回答