在复选框上显示框或输入框

Question

我怎样才能使这项工作...

如果我选择一个框，它会显示我的输入框或在选中一个框时我需要显示的任何内容...问题是我有 5 个复选框...

所以如果用户选择

Box 1 [x]
Box 2 [x]
Box 3 [x]
box 4 [x]
Box 5 [ ]

到目前为止，代码工作正常...但随后他/她意识到不再需要 Box 3 并希望将 3 切换为 5 ...在单击提交按钮之前

Box 1 [x]
Box 2 [x]
Box 3 [ ]
box 4 [x]
Box 5 [x]

当这种情况发生时，输入框会从显示变为隐藏......我不希望这样，因为仍然选择了 1、2、4 和 5......

如果没有选择任何人，那么肯定什么都不显示...但是只要选择了一个，那么输入框或按钮或文本或任何需要的东西都必须显示...

下面是测试代码：

HTML

  <input type="checkbox" name="supplied" id="supplied" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_1" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_2" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_3" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_4" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_5" value="supplied" class="aboveage2" />

<ul id="date" style="display:none">
    <li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
    <li><input id="end" name="end" size="5" type="text" class="small" value="2" /></li>
</ul>

Java

  $('#supplied, #supplied_1, #supplied_2, #supplied_3, #supplied_4, #supplied_5').live('change', function(){
      if ( $(this).is(':checked') ) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });

现场测试链接： http://jsfiddle.net/GBSZ8/284/

谢谢。

Answer 1

$('.aboveage2').live('change', function() {

    if ( $(".aboveage2:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

演示：http://jsfiddle.net/samliew/GBSZ8/295/

请注意，live 仅适用于 jQuery 1.7 或更低版本。要迁移到最新的 jQuery，请参阅jQuery 1.9 .live() is not a function

---

更新：

您网站上的复选框类与问题中的不同！！！

改用这个选择器：

$('input[name*=accessory_id]').live('change', function() {

    if ( $("input[name*=accessory_id]:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

Answer 2

我更改了您的选择器。我的上下文有限，但根据您提供的示例，这似乎是一个更好的选择。

$('.aboveage2').bind('change', function(){
  var $inputs = $(this).siblings('input').add($(this));
  var checked = false;
  for (var i = 0; i < $inputs.length; i++) {
    var input = $inputs[i];
    checked = $(input).is(':checked');
    if (checked) break;
  }
  $('#date').toggle(checked);
});

此解决方案只是循环遍历每个复选框。如果选中该复选框，则它会从循环中中断并确保 $("#date") 正在显示。否则它将隐藏 $("#date")。

http://jsfiddle.net/RV4aJ/