Question

我遇到多个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/

的解决方案

Answer 1

你刚给了你的showpanel同一个类，这样当一个复选框激活你的 .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或复选框的其他确定性属性（如值或数据属性）显示和隐藏它们。

干杯。

是否有可能在jquery中实现多个？

1 个答案: