jquery - 多个表单元素的相同 jQuery 函数。我该如何巩固

Question

如果选中了多个复选框，我需要显示和隐藏 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');
        }
    });

  });

Answer 1

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

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

这使用attribute-starts-with 选择器来获取输入，然后使用它们的.name属性通过 ID 获取适当的元素。如果选中，则运行.show('slow')，否则.hide('slow')在具有该 ID 的元素上运行。

Answer 2

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

}

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

Answer 3

您可以使用toggle()而不是if ... else此处来进一步减少代码：

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

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

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

Answer 4

看起来您正在进行某种类型的命名约定。您可以进入当前上下文对象，获取名称并按照您的约定进行操作。您可能希望为您的复选框字段提供一些特殊的 css 类以便于选择：

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

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

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