ラジオボタンのチェックが外れた時に、イベントを発生させることはできますか？

解決済

質問者：sweepea
質問日時：2008/10/05 17:20
回答数：2件

例えば、以下のようにラジオボタンが3つあって、

<input type="radio" name="color"> 赤
<input type="radio" name="color"> 青
<input type="radio" name="color" onXxx="check()"> 黄

黄がチェックされた時と、チェックが外れた時に、動作するイベントハンドラって可能ですか？

↓check関数の例
function check() {
　if (略) {
　　alert('「黄」がチェックされました');
　} else {
　　alert('「黄」がチェックが外れました');
　}
}

onchangeも、onfocus＋onblurも、微妙な動きになってしまいます。

やはり、全てのラジオボタンの要素にclickイベントハンドラ追加してやらないといけないのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： _pipi_
回答日時：2008/10/05 17:48

<html>

<input type="radio" name="color" id="r"> 赤
<input type="radio" name="color" id="b"> 青
<input type="radio" name="color" id="y"> 黄

<script>
window.onload = function(){
window.document.onclick = check;
}

function check(e) {
var o=e?e.target:event.srcElement;
if(o.tagName !='INPUT' && o.type !='radio') return;
if(document.getElementById('r').checked) alert('赤になった'); else alert('赤はずれ');
if(document.getElementById('b').checked) alert('青になった'); else alert('青はずれ');
if(document.getElementById('y').checked) alert('黄になった'); else alert('黄はずれ');

}
</script>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

なるほど！document全体にクリックを登録して、イベントがラジオボタンなら、とやってるんですね。

ラジオボタン分ループしてイベントリスナーを登録するより、行数が減りました。JavaScript勉強せねば。。

ありがとうございましたー！

通報する

お礼日時：2008/10/05 20:18

No.2

回答者： yambejp
回答日時：2008/10/06 01:50

単純にフラグで管理してみては？

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

なるほど。こちらの方が正統的な感じがしますね。

「黄」がチェックされているかどうかが知りたいだけなので、
少し無駄なイベントが増えますが、以下のようにしようと思います。

<script>
window.onload = function() {
　　var tags = document.getElementById("colors").getElementsByTagName("input");
　　for (var i = 0; i < tags.length; i++) {
　　　　tags[i].onclick = function() {
　　　　　　if (this.value == "y") {
　　　　　　　　alert("「黄」がチェックされました");
　　　　　　} else {
　　　　　　　　alert("「黄」がチェックが外れました");
　　　　　　}
　　　　}
　　}
}
</script>

<div id="colors">
<input type="radio" name="color"> 赤
<input type="radio" name="color"> 青
<input type="radio" name="color" value="y"> 黄
</div>

ありがとうございました。