一個HTML元素的多個選擇器的短語法

Question

我有以下代碼：

<form id="form">
  <input type="checkbox" name="foo" />
  <input type="checkbox" name="bar" />
</form>

<form>
  <input type="checkbox" name="foo">
  <input type="checkbox" name="bar">
</form>

而這個jQuery：

$(document).ready(function(){

  $('#form input[name=foo], input[name=bar]').change(function (){

    alert('foo');

  });

});

現在，如果我檢查#form foo，將顯示'foo'。 如果我選中另一個復選框“foo”，而不是兩個'bar'復選框，則不會發生這種情況。

我想要的是，只有在id為'form'的表單中才會識別出該動作。 我可以通過將此行修改為：

$('#form input[name=foo], #form input[name=bar]').change(function (){

我只是想知道是否存在“短”語法可能性？

最好的祝福

Answer 1

好吧，不是很短，但你可以避免兩次使用#form ：

$('#form').find('input[name=foo], input[name=bar]').change(function () {

略短：

$('#form input').filter('[name=foo], [name=bar]').change(function () {

Answer 2

如果我是你，我會為他們分配相同的類並為這個類應用jquery，如下所示：

$('#form .classname').change(function (){

    alert('foo');

  });

Answer 3

您可以使用選擇#form然后在元素上使用find ：

例：

$（document）.ready（function（）{

 $('#form').find('input[name=foo], input[name=bar]').change(function () { alert('foo'); }); }); 

提琴手： http ： //jsfiddle.net/5LH7G/

文檔查找：

獲取當前匹配元素集中每個元素的后代，由選擇器，jQuery對象或元素過濾。

Answer 4

您可以按屬性值使用選擇器：

$('form [name=foo], form [name=bar]').change(function (){
    alert('foo');
  });