根据复选框选择显示/隐藏对象答案

【问题标题】：show/hide object based on checkbox selection根据复选框选择显示/隐藏对象
【发布时间】：2011-11-04 19:00:54
【问题描述】：

我有一个包含一组复选框的页面，每个复选框都有一个动态生成的值，因此它会随着每个页面呈现而变化。示例如下所示：

<fieldset id="P163_PROFILES" tabindex="-1" class="checkbox_group">
   <input type="checkbox" id="P163_PROFILES_0" name="p_v01" value="264" checked="checked">
   <input type="checkbox" id="P163_PROFILES_1" name="p_v01" value="2356" checked="checked">
</fieldset>

然后，在 DIV 类与输入值中的一个匹配的日历布局中，我在页面的其余部分中都有 <div class="264"> 和 <div class="2356"> 标记。我的问题是这个。如果用户取消/选中其中一个输入框，我想隐藏/显示具有匹配类的 DIV。由于我是 jQuery 新手，我正在努力识别已更改的输入对象的逻辑，然后使用它的值来更改适当的 DIV 对象。这是我到目前为止的代码：

<script type="text/javascript"> 
$( '[id^=P163_PROFILES_]' ).click(function(){
   var pClass = '.'+$(this).val();
   if ($(this).is(':checked')) {
         $(pClass).show;
      } else {
         $(pClass).hide;
      }
});
</script>

我还接近吗？

谢谢，杰夫

【问题讨论】：

标签： jquery input checkbox

【解决方案1】：

你实际上非常接近！在 show() 和 hide() 方法之后，您忘记了 ()：

if ($(this).is(':checked')) {
    $(pClass).show();
} else {
    $(pClass).hide();
}

Here's a demo

【讨论】：

【解决方案2】：

你可能会想要

$('input[id^="P163_PROFILES_"]').click(function(event){
    var pClass = '.'+$(event.target).val();
    if ($(event.target).is(':checked')) {
        $(pClass).show();
    } else {
        $(pClass).hide();
    }
});

您可能不必担心使用这种特定的选择器会冒泡，因此您可以使用：

$('input[id^="P163_PROFILES_"]').click() {
    var $this = $(this);
    $('.'+$this.val()).toggle($this.is(':checked));
});

【讨论】：

【解决方案3】：

您应该能够简化该代码。首先，我建议不要使用click() 事件，首选事件是change()

首先，让我们假设一切都以所需的状态开始。你可以这样做：

<script type="text/javascript"> 
$( 'input[id^="P163_PROFILES_"]' ).change(function(){
   var pClass = '.'+$(this).val();
   $(pClass).toggle();
});
</script>

Toggle 将简单地切换所选元素的可见性。

如果您需要根据状态进行切换，请执行以下操作：

<script type="text/javascript"> 
$( 'input[id^="P163_PROFILES_"]' ).change(function(){
    var pClass = '.'+$(this).val();
    if ($(this).is(':checked'))
         $(pClass).show();
    else
         $(pClass).hide();
});
</script>

【讨论】：

【解决方案4】：

实际上，如果您查询字段集 inputchildren 而不是查询 id 的开头，则可以进一步简化它。也可能会简化您的代码生成，因为这可能意味着您不必为输入生成 ID。

另外，您过度使用 jQuery。通常“this”将拥有您需要的所有东西，并且您不需要通过将其包装在 jQuery 中来增加开销。没有理由不直接使用 this.checked 和 this.value。

$('#P163_PROFILES > input' ).change(function(){
    if (this.checked)
        $('.'+this.value).show();
    else
        $('.'+this.value).hide();
    //Or toggle if you know the initial state is in sync with the target
    //and nothing else changes the show/hide of those targets.
    //$('.'+this.value).toggle();
});

【讨论】：