ラジオボタンに「選択解除」イベントを添付する簡単な方法はありますか？変更イベントは、ボタンが選択されている場合にのみ発生するようです。
HTML
<input type="radio" id="one" name="a" />
<input type="radio" id="two" name="a" />
JavaScript
$('#one').change(function() {
if(this.checked) {
// do something when selected
} else { // THIS WILL NEVER HAPPEN
// do something when deselected
}
});
jsFiddle </ p>
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属性を持つ要素) のメンバー間でのみトリガーされます。
編集:添付されたラベル タグのすべての可能な配置 (ラジオ要素をラップするか、id セレクターを介して添付される) を考慮するために、onchangeイベントを使用してハンドラーをトリガーする方がおそらく良いでしょう。それを指摘してくれたFaustに感謝します。
$('input[type="radio"]').on('change', function(){
// ...
}
カスタムの「選択解除」イベントを比較的簡単に作成できますが、標準の変更イベントは新しくチェックされたラジオ ボタンでのみトリガーされ、以前にチェックされていてチェックが外されたラジオ ボタンではトリガーされないことが既にわかっています。
あなたが次のようなことを言うことができるようにしたい場合:
$("#one").on("deselect", function() {
alert("Radio button one was just deselected");
});
次に、ドキュメント準備完了ハンドラーから次のような関数を実行します (または、ドキュメント準備完了ハンドラーにコードを直接配置します)。
function setupDeselectEvent() {
var selected = {};
$('input[type="radio"]').on('click', function() {
if (this.name in selected && this != selected[this.name])
$(selected[this.name]).trigger("deselect");
selected[this.name] = this;
}).filter(':checked').each(function() {
selected[this.name] = this;
});
}
実際のデモ: http://jsfiddle.net/s7f9s/2
これが行うことは、ページ上のすべてのラジオにクリック ハンドラーを配置することです (これにより、同じラジオに独自のクリック イベント ハンドラーを追加するのを止めることはできません)。これは、同じグループ内に以前に選択されたラジオがあったかどうかを確認します (つまり、その場合、そのラジオで「選択解除」イベントをトリガーします。次に、クリックしたばかりのものを現在のものとして保存します。すでにチェックされているラジオをクリックした場合、または以前にチェックされていなかった場合、「選択解除」イベントはトリガーされません。最後の.filter().each()ビットは、どのラジオがすでに選択されているかをメモすることです。(同じ名前の独立したラジオグループを持つ同じページで複数のフォームに対応する必要がある場合は、それに応じて上記の関数を更新してください。)
deselectedイベントを作成するための新しいフレームワークを入れずにこれを行う最も簡単な方法は、ラジオボタンを変更すると、そのグループ内のすべてupdateのラジオボタンでイベントがトリガーされ、更新イベントで必要な動作を定義することであることがわかりました.
欠点は、ラジオ ボタンが以前に選択されていない場合でも、選択解除ブランチのコードが実行されることです。UI 要素の表示、非表示、または無効化だけを行っている場合は、それほど重要ではありません。
あなたの例を使用するには：
buttons = $('input[name="a"]');
buttons.change(function() {
buttons.trigger('update:groupA');
}).bind('update:groupA', function(){
if(this.checked) {
//Do your checked things
} else {
//Do your unchecked things. Gets called whenever any other button is selected, so don't toggle or do heavy computation in here.
}
});
各ラジオボタンではなく、入力レベルに変更機能を追加する必要があると思います。
これを試して：
$("input[name='a']").change(function() {
$("input[name='a']").each(function(){
if(this.checked) {
// do something when selected
} else {
// do something when deselected
}
});
});
focusイベントがイベントの前にトリガーされるchangeため、前にチェックしたラジオが変更イベントをトリガーする前に、次にクリックするラジオがフォーカスされるため、これが発生する可能性があると思います。これについて私を引用しないでください...
次のようにできます。
var isChecked = function(id) { alert(id + ': ' + $('#' + id).is(':checked')) }
$('input[name="a"]').change(function(){ isChecked('one') })
特定のケースで役立つ可能性のある回避策を見つけました。これは、選択されていないすべてのラジオ ボタンに「選択解除」イベントを適用できる場合に機能します。
私はしたかった：
私は同じ問題を抱えていたので、たまたまこの質問を見つけました：
$('input:radio').on('change', function() {
if( $(this).is(':checked') ) {
$(this).addClass('my-class-for-selected-buttons')
} else { // THIS WILL NEVER HAPPEN
$(this).removeClass('my-class-for-selected-buttons')
}
});
しかし、私の場合、jQuery を使用して非常に簡単にすべてのラジオボタンからクラスを削除し、選択したクラスにクラスを追加できるため、解決策はかなり簡単でした。
$('input:radio').on('change', function() {
$('input:radio').removeClass('my-class-for-selected-buttons') // Here!
if( $(this).is(':checked') ) {
$(this).addClass('my-class-for-selected-buttons')
}
});
この単純な調整により、「選択解除」イベントをトリガーする方法を見つける必要がなくなりました。
したがって、あなたの場合、選択されていないすべてのラジオボタンにイベントを適用でき、「選択解除」されたばかりのラジオボタンだけでなく、この手段を使用できます!
どうですか？
$('input').change(function() {
if ($('#one').is(':checked')) {
alert('checked');
} else {
alert('not checked');
}
});