代码之家 › 专栏 › 技术社区 › samyb8

Jquery根据DIV的ID显示/隐藏DIV,使用复选框

items checkbox forms jquery

samyb8 · 技术社区 · 12 年前

我正试图根据是否选中复选框来隐藏/显示DIV。

我的网站上显示了多个项目,每个项目都在一个名为.itemBox的DIV下。复选框中显示了一些颜色,我想隐藏除了用户选择的颜色之外的所有项目(取决于所选的复选框)。

我的javascript应该检查每个.itemBox项的ID(这是一种颜色),然后隐藏/显示。

到目前为止,我已经有了我的表单和javascript,但当我选中复选框时,什么都不会发生。

形式:

div class="colors">
<?php
$colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
while ($colorBoxes = mysql_fetch_array($colors))
{
echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>

JAVASCRIPT语言:

<script>
    $('.colors').delegate('input:checkbox', 'change', function() { 
         if ($(this).attr('checked')) {
            $(".itemBox not(#" + $(this).val()  + ")").hide();
            $(".itemBox #" + $(this).val()).show();
        }
    })
</script>

输出:

<td><div name='item' id='".$info[color_base1]."' class='itemBox'> .....

3 回复 | 直到 12 年前

Bertrand 12 年前

以下是我的操作方法:

$(":checkbox").bind("click", function (event) {
     if($(this).is(':checked')) {
          $(".itemBox:not(#" + $(this).val()  + ")").hide();
          $(".itemBox[id='" + $(this).val() + "']").show();
     }else {
           //maybe you should do smth if checkbox is unchecked
     }
});

我认为你的错误是前面有空格:不是,第二个选择器应该像$(“.itemBox[name='value']”)一样在[之前没有空格。

adeneo 12 年前

根据你的代码假设 $info[color_base1] 和 $colorBoxes[color_base1] 是一样的,也许是这样的,很难说,因为我没有很好地阅读PHP输出和数据库值?

$('input[type="checkbox"]').on('change', function() { 
    if (this.checked) {
        $(".itemBox").hide();
        $("#" + this.value).show();
    }
});

ZapRowsdower910 12 年前

有几件事,你正在使用 color 作为jQuery选择中的一个类,但在html中其定义为名称:

<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font>

如果你想使用复选框名称,你可以使用这样的选择器:

$('input[name=color]')....

记住 . 表示法描述一个类。

看看这个jsFiddle: http://jsfiddle.net/ufomammut66/h6m4H/

它很简单,但你可以看到切换显示隐藏下一个itemBoxdiv。你的html很可能不同,所以这对你来说不起作用,但由于你没有发布所有内容,我无法使用正确的html路径。

推荐文章

Mickey Vershbow · 无法获取复选框的“checked”属性

2 年前

XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹ · 如何在for js之后重置字符串变量

2 年前

SãOãNã JãOãã · Google sheets复选标记条件格式化

2 年前

Ranjith Raina · 在jquery中,可以将所有复选框值转换为逗号分隔的字符串

2 年前

Alex · 引导对齐表单开关左侧的标签

2 年前

Khilen Maniyar · 角度2:带有复选框的阵列工作不正常

6 年前

Yash Saraiya · jQuery datatable:在每个分页上启用几个文本框

6 年前

Kais · 带有输入复选框的表格选中/取消选中

6 年前

Silu K · 单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

6 年前

yuggmeister · 如何使自定义复选框可访问?

6 年前