对多个表单元素使用相同的jQuery函数。如何整合

如果选中多个复选框，我需要显示和隐藏一个div

需要显示的每个div的id将与复选框名称相同。有没有一种简单的方法可以在不编写函数来处理每个复选框的情况下实现这一点

    $('input[name=checkbox_1]').click(function() {
        if ($('input[name=checkbox_1]').is(':checked')) {
            $('#checkbox_1').show('slow');
        }

        else {
            $('#checkbox_1').hide('slow');
        }
     });
     $('input[name=checkbox_2]').click(function() {
                   if ($('input[name=checkbox_2]').is(':checked')) {
            $('#checkbox_2').show('slow');
        }

        else {
            $('#checkbox_2').hide('slow');
        }
    });

  });

---

您可以从名称中获取ID，如下所示：

$('input[name^=checkbox_]').click(function() {
  $('#' + this.name)[this.checked ? 'show' : 'hide']('slow');
});

---

这将使用获取输入，然后使用它们的ID获取相应的元素。如果选中，则在具有该ID的元素上运行

.show（'slow'）

，否则运行

.hide（'slow'）

。

您可以从名称获取ID，如下所示：

$('input[name^=checkbox_]').click(function() {
  $('#' + this.name)[this.checked ? 'show' : 'hide']('slow');
});

$('input[name^=checkbox]').click(function() {
    if(this.checked){
       $('#' + this.name).show('slow');
    } else{
       $('#' + this.name).hide('slow');
    }

}

这将使用获取输入，然后使用其ID获取相应的元素。如果选中，则在具有该ID的元素上运行

.show（'slow'）

，否则运行

.hide（'slow'）

）

$('input[name^=checkbox]').click(function() {
    if(this.checked){
       $('#' + this.name).show('slow');
    } else{
       $('#' + this.name).hide('slow');
    }

}

编辑：如其他人所说，使用“开始于”选择器比检查indexOf要好

编辑：使用“开始于”选择器要比检查indexOf好得多，就像其他人说的那样，

如果。。。else此处可进一步减少代码：

('input[name^=checkbox_]').click(function(){
    $('#' + this.name).toggle('slow')
});

切换也可以在交替单击时运行不同的功能，而不仅仅是隐藏/显示元素：

('input[name^=checkbox_]').toggle(function(){
    $('#' + this.name).hide('slow')
}, function(){
    $('#' + this.name).show('slow')
    } );

如果。。。else此处可进一步减少代码：

('input[name^=checkbox_]').click(function(){
    $('#' + this.name).toggle('slow')
});

切换也可以在交替单击时运行不同的功能，而不仅仅是隐藏/显示元素：

('input[name^=checkbox_]').toggle(function(){
    $('#' + this.name).hide('slow')
}, function(){
    $('#' + this.name).show('slow')
    } );

---

看起来您有某种类型的命名约定。您只需进入当前上下文对象，获取名称并使用约定即可。您可能希望为复选框字段提供一些特殊的css类，以便于选择：

$('input.someCssClass').click(function() {

    var selector = '#' + $(this).attr('name');

    if ($(this).is(':checked'))
        $(selector).show('slow');
    else
        $(selector).hide('slow');
});

---

看起来您有某种类型的命名约定。您只需进入当前上下文对象，获取名称并使用约定即可。您可能希望为复选框字段提供一些特殊的css类，以便于选择：

$('input.someCssClass').click(function() {

    var selector = '#' + $(this).attr('name');

    if ($(this).is(':checked'))
        $(selector).show('slow');
    else
        $(selector).hide('slow');
});

---

在复选框处理程序中很少需要

$（this）.is（“：checked”）

，

this.checked

更简单/更快：）@afeng-它是

this.checked

：），

$（this）.checked

将始终为false，它不是jQuery对象上的属性，而是DOM元素属性。啊，我明白了。再次感谢，哈哈。很少有人需要

$（this）。在复选框处理程序中，
this.checked
更简单/更快：）@afeng-它是
this.checked
：），
$（this）。checked
将始终为false，它不是jQuery对象的属性，而是DOM元素属性。啊，我明白了。再次感谢你，哈哈。我会说，根据经验，
.toggle（）？如果是相反的呢？虽然
.toggle（）
（隐藏/显示快捷方式）“缩短”了内容，但效果并不相同，执行
隐藏
或
显示
可明确确保元素的状态与复选框的状态相同。例如，如果用户在DOM准备就绪之前单击复选框，则该复选框尚未执行，状态与应该的状态相反。或者，再一次，如果复选框已被选中，并且您的初始状态不同步，该怎么办？那么这不是他的解决方案；）根据经验，99%的情况下，我会说
.toggle（）
（处理程序）不是正确的方法……如果最初选中复选框会怎么样？如果是相反的呢？虽然
.toggle（）
（隐藏/显示快捷方式）“缩短”了内容，但效果并不相同，执行
隐藏
或
显示
可明确确保元素的状态与复选框的状态相同。例如，如果用户在DOM准备就绪之前单击复选框，则该复选框尚未执行，状态与应该的状态相反。或者，再一次，如果复选框已被选中，并且您的初始状态不同步，该怎么办？那么这不是他的解决方案；）