クラスの組み合わせでチェックボックスの変更を使用することはできますか？

Question

<input type="checkbox" class="one" value="1"> 
<br/> 
<input type="checkbox" class="two" value="2"> 
<br/> 
<input type="checkbox" class="one" value="3"> 
<br/> 

下に示すように、このチェックボックスをオンまたはオフされている場合は、私が

$(document).on('change', '.[type="checkbox"]', function(event, data){ 
    alert('checked '); 
}); 

呼び出される以下のコードを持っているとクラスとチェックボックスと私のコードです私の質問は、どのようにイベントハンドラでもクラスを使用できますか？私はこのよう

$(document).on('change', '.one .[type="checkbox"]', function(event, data){ 
    alert('checked '); 
}); 
$(document).on('change', '.two .[type="checkbox"]', function(event, data){ 
    alert('checked '); 
}); 

http://jsfiddle.net/FdEhf/32/

Answer 1

を試してみました

これは間違った選択である：

'.[type="checkbox"]' 

あなたは属性セレクタの前にドット.を持つことはできません。

'.one[type="checkbox"]' 
// make sure you don't have any space in between. 

---

は、さてあなたは、それぞれのチェックボックスに共通するクラス名を持つことができますし、そのクラスに変更イベントをバインドすることができます。

---

今、あなたがこの方法を使用することができ、あなたの質問に答えるために：

$('.commonClass[type="checkbox"]').on('change', function(event, data) { 
 
    if (this.checked) { 
 
    console.log(this.classList[1]+' checked '); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="checkbox" class="commonClass one" value="1"> 
 
<br/> 
 
<input type="checkbox" class="commonClass two" value="2"> 
 
<br/> 
 
<input type="checkbox" class="commonClass three" value="3"> 
 
<br/>

要素を動的に生成しない限り、イベント委任をにバインドする必要はありません。

Answer 2

はい可能です。あなたはこのセレクタを使用することができます

：

.one[type="checkbox"] 

それを打破するには、このセレクタは、タイプとしてcheckboxに等しい属性という.oneクラスで任意の要素にマッチします。

セレクタとして[type="checkbox"]を使用して、変更ハンドラ内で要素クラスを調べることもできます。この単純な例

$(document).on('change', '[type="checkbox"]', function(event, data){ 
    var classes = $(this).attr('class').split(' '); // may be multiple classes - split them into an array 
    if ($.inArray('one', classes)){ 
     alert('.one was changed!'); 
    } else { 
     alert('some other checkbox was changed!'); 
    } 
}); 

それはやり過ぎかもしれないが、それはあなたがさらに別のチェックボックスをカスタマイズすることができるようになる - あなたが別のチェックボックスの間でわずかに異なる機能を持っていると思った場合、これは有用であろう。

Answer 3

まず、1つの余分な "。"を削除します。その前に[type="checkbox"]と2番目はイベントリスナーとして.one .twoのようなクラスのみを使用し、必要に応じて結果を取得します。