用于多个表单元素的相同 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-使用选择器获取输入，然后使用其.name property 通过 ID 获取适当的元素。如果选中，则在具有该 ID 的元素上运行 .show('slow')，否则运行 .hide('slow')。

Answer 2

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

}

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

Answer 3

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

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

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

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

Answer 4

您可以在此处使用 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')
    } );