1

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

如果我选择一个框，它会显示我的输入框或选中框时我需要显示的任何内容...问题是我有 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>

爪哇

  $('#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/

谢谢你。

4

2 回答 2

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();
    }
});
于 2013-09-05T02:00:04.893 回答
0

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

$('.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/

于 2013-09-05T02:32:54.543 回答