on（）Javascript中的多个子选择器

我在jquery中使用on（）方法，我想知道是否可以缩短代码，因为我只是反复使用代码，但使用不同的子选择器是否可以在一个

on（）

中使用多个子选择器？

这是一个示例代码，我有很多这样的代码

$(document.body).on('change', 'input[name*="create"]', function() {
  var $class = $(this).attr('class');
  if (!$(this).is(':checked')) { //not checked
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': false
    });
  } else {
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': true
    });
  }
});

$(document.body).on('change', 'input[name*="compute"]', function() {
  var $class = $(this).attr('class');
  if (!$(this).is(':checked')) { //not checked
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': false
    });
  } else {
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': true
    });
  }
});

$(document.body).on('change', 'input[name*="print"]', function() {
  var $class = $(this).attr('class');
  if (!$(this).is(':checked')) { //not checked
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': false
    });
  } else {
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': true
    });
  }
});

我想知道是否可以在一个

中使用多个
'input[name*=“create”]
，这样我就不必重复了。
使用

如果要在多个位置使用相同的函数行，请首先将其声明为单个函数名。然后你可以随时打电话给它

对于实现部分，可以使用css选择器将一个事件实现到多个类。（下文）


函数dotheAction（e）{
var$class=$（e）.attr（'class'）；
如果（！$（this）.is（':checked'））{//未选中
$（'input[name*=“'+$class+'\u selectall“]'）。attr({
“选中”：false
});
}否则{
$（'input[name*=“'+$class+'\u selectall“]'）。attr({
“选中”：true
});
}
};
$（document.body）.on（'change'，'input[name*=“create”]、input[name*=“compute”]、input[name*=“print”]、dotheAction（this））
您可以创建一个事件函数，将事件附加到dom中的元素，并将事件应用于所需的回调


函数attachEvent（事件名、选择器、回调）{
$（文档）.on（事件名称、选择器、回调）；
}
var changeCallback=函数（）{
var className=$（this.attr（'class'）；
console.info（类名）；
如果（！$（this）.is（':checked'））{//未选中
$（'input[name*=“'+className+'\u selectall”]'）。attr({
“选中”：false
});
}否则{
$（'input[name*=“'+className+'\u selectall”]'）。attr({
“选中”：true
});
}
};
附件（'change'，'input[name*=“create”]、input[name*=“compute”]、input[name*=“print”]、changeCallback）
从不使用调用方的
类名来引用其他元素。有一天，你会在元素中添加一个样式类，你的JS会崩溃，让你感到疑惑

相反使用
数据-*
属性引用：

<input type="checkbox" data-target="create"> Create<br>
<input type="checkbox" data-target="compute"> Compute <br>
<input type="checkbox" data-target="print"> Print<br>

为什么不创建一个调用的函数，而不是将匿名函数复制三次呢？
'input[name*=“create”]、input[name*=“compute”]、input[name*=“print”]”
，或者更好的是，使用一个类。
$class
是一个字符串，而不是
$
jQuery对象引用，所以使用
klass
：）这些输入在多个复选框上，例如
{！！Form:：checkbox（'quality\u control\u create'，'1'，null，array（'class'=>'quality\u control'））！！}create CA
有更多的空间来消除重复。例如，您可以将if语句替换为
$（'input[name*=“'+$class+'\u selectall']'）.attr（{'checked'：$（this）.is（':checked'）}）
Humm。。。你只是在增加一层复杂性<代码>$（“sel”）。关于（“变更”，“动态”，cb）
非常足够、清晰、简单，可以告诉您它的功能—无需查找某些全局污染的
attachEvent
函数变量。
<input type="checkbox" data-target="create"> Create<br>
<input type="checkbox" data-target="compute"> Compute <br>
<input type="checkbox" data-target="print"> Print<br>

<input type="checkbox" name="create_selectall">

$("body").on('change', 'input[data-target]', function() {
  $('input[name*="'+ this.dataset.target +'_selectall"]').prop({checked: !this.checked});
});