使用复选框和jQuery切换在下拉框中隐藏某些值

时间:2013-11-27 12:03:31

标签: php jquery checkbox

我有一个下拉框,里面装满了从数据库中提取的选项。这些选项中的每一个都将具有“Y”或“N”的有效指示值。我有一个复选框,其中包含所有选项或仅包含活动选项。

我目前有完美的数据库选择。输入选项的for循环如下所示:

for ($i = 0; $i < count($category_record); $i++) {
if($category_record[$i]->getActiveInd() == "Y")
              {
    echo '<option value="'.$category_record[$i]->getId().'" '.$checked.' >&nbsp;&nbsp; - '.$category_record[$i]->getTitle().'</option>';    
              }
else if($category_record[$i]->getActiveInd() == "N")
              {
    echo '<option id="inactive" value="'.$category_record[$i]->getId().'" '.$checked.' >&nbsp;&nbsp; - '.$category_record[$i]->getTitle().'</option>';    
              }

因此,如果该值为非活动值,则该选项的ID为“#inactive”。

复选框很简单:

<input type="checkbox" name="search_active" id="checkbox" />

我现在的jQuery看起来像这样:

$(document).ready(function() {  
 $('input[type=checkbox]').click(function(){
    var $this = $(this);
    if($this.is(':checked'))
    {
        $('#inactive').show();
    }
    else
    {
        $('#inactive').hide();
    }
 });
});

这段代码确实有效,因为它会在未选中复选框时隐藏非活动值,但它只会隐藏它遇到的第一个值而不是所有值。 我已经检查了元素,但他们仍然肯定有#inactive id,但他们不会隐藏。我找了一个答案,但一直找不到,我做错了什么?

2 个答案:

答案 0 :(得分:0)

对下拉列表中的选项使用“非活动”类,而不是id。并使用类修改你的js show()和hide()。

答案 1 :(得分:0)

对于多个元素,您应该使用类.active.inactive或创建自己的属性,例如state。

PHP:

for ($i = 0; $i < count($category_record); $i++) {
if($category_record[$i]->getActiveInd() == "Y")
              {
    echo '<option value="'.$category_record[$i]->getId().'" '.$checked.' >&nbsp;&nbsp; - '.$category_record[$i]->getTitle().'</option>';    
              }
else if($category_record[$i]->getActiveInd() == "N")
              {
    echo '<option class="inactive" value="'.$category_record[$i]->getId().'" '.$checked.' >&nbsp;&nbsp; - '.$category_record[$i]->getTitle().'</option>';    
              }

JS:

$(document).ready(function() {  
 $('input[type=checkbox]').click(function(){
    var $this = $(this);
    if($this.is(':checked'))
    {
        $('.inactive').show();
    }
    else
    {
        $('.inactive').hide();
    }
 });
});