deselect
たとえば、クリックされた要素自体を除く、クリックされたラジオグループのすべてのメンバーでトリガーされるようなカスタムイベントを作成してみませんか? jQuery が提供するイベント処理 API を使用する方が簡単です。
HTML
<!-- First group of radio buttons -->
<label for="btn_red">Red:</label><input id="btn_red" type="radio" name="radio_btn" />
<label for="btn_blue">Blue:</label><input id="btn_blue" type="radio" name="radio_btn" />
<label for="btn_yellow">Yellow:</label><input id="btn_yellow" type="radio" name="radio_btn" />
<label for="btn_pink">Pink:</label><input id="btn_pink" type="radio" name="radio_btn" />
<hr />
<!-- Second group of radio buttons -->
<label for="btn_red_group2">Red 2:</label><input id="btn_red_group2" type="radio" name="radio_btn_group2" />
<label for="btn_blue_group2">Blue 2:</label><input id="btn_blue_group2" type="radio" name="radio_btn_group2" />
<label for="btn_yellow_group2">Yellow 2:</label><input id="btn_yellow_group2" type="radio" name="radio_btn_group2" />
<label for="btn_pink_group2">Pink 2:</label><input id="btn_pink_group2" type="radio" name="radio_btn_group2" />
jQuery
// Attaching click event handlers to all radio buttons...
$('input[type="radio"]').bind('click', function(){
// Processing only those that match the name attribute of the currently clicked button...
$('input[name="' + $(this).attr('name') + '"]').not($(this)).trigger('deselect'); // Every member of the current radio group except the clicked one...
});
$('input[type="radio"]').bind('deselect', function(){
console.log($(this));
})
選択解除イベントは、同じラジオ グループ (同じname
属性を持つ要素) のメンバー間でのみトリガーされます。
jsFiddle ソリューション
編集:添付されたラベル タグのすべての可能な配置 (ラジオ要素をラップするか、id セレクターを介して添付される) を考慮するために、onchange
イベントを使用してハンドラーをトリガーする方がおそらく良いでしょう。それを指摘してくれたFaustに感謝します。
$('input[type="radio"]').on('change', function(){
// ...
}