0

我有多个问题CheckBoxes

标记

<p>
  <label>Display 1</label>
  <input class="show-options" id="one" name="name" type="checkbox" value="1" />
</p>

<p>
  <label>Display 2</label>
  <input class="show-options" id="second" name="name" type="checkbox" value="2" />
</p>

<div class="show-options-panel" style="display: none;">
  <p>Checkbox 1</p>
</div>

<div class="show-options-panel" style="display: none;">
  <p>Checkbox 2</p>
</div>

JS

jQuery(document).ready(function($){

  $('.show-options').live('change', function(){
      if( $(this).is(':checked') ) {
        $(this).parent().parent().find('.show-options-panel').show('medium');
      } else {
        $(this).parent().parent().find('.show-options-panel').hide('medium');
      }
 });

});

CheckBoxes是否可以使用该标记创建倍数？这是示例http://jsfiddle.net/satryabima/CupF3/1/

更新

这是我朋友http://jsfiddle.net/neosheet/9y44X/的解决方案

4

1 回答 1

1

您刚刚为您的显示面板提供了相同的类，因此当一个复选框激活您的.show-options-panel时，另一个复选框将不会再次显示相同的面板，因为它当然已经在错误的文本中可见。而且您的复选框具有相同的ID，这并不酷。

要了解单击的内容，您应该像这样编辑代码：

HTML

<p>
  <label>Display 1</label>
  <input class="show-options" id="first" name="name" type="checkbox" value="1" />
</p>

<p>
  <label>Display 2</label>
  <input class="show-options" id="second" name="name" type="checkbox" value="2" />
</p>

JS

$(function() {
    $('.show-options').on('change', function(){
        if( $(this).is(':checked') ) {
            console.log($(this).attr("id") + " checked");
        } 
        else {
            console.log($(this).attr("id") + " unchecked");
        }
    });
});

如果您在浏览器中打开 Javascript 控制台窗口，您会看到发生了什么。另一种选择是使用两个具有不同文本和不同 id 的显示面板，然后根据 id 或复选框的某些其他确定性属性（如值或数据属性）显示和隐藏它们。

干杯。

于 2013-01-12T12:50:02.860 回答