Question

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

<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 class="264">和<div class="2356">标记，其中DIV类匹配输入值。我的问题是这个。如果用户取消/检查其中一个输入框，我想隐藏/显示具有匹配类的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>

我甚至关闭了吗？

谢谢，杰夫

Answer 1

你真的很亲密！您在()和show()方法后忘记了hide()：

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

Here's a demo

Answer 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));
});

Answer 3

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

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

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

切换只会切换所选元素的可见内容。

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

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

Answer 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();
});

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

4 个答案: