- ベストアンサー
ラジオボタンのチェックが外れた時に、イベントを発生させることはできますか？
例えば、以下のようにラジオボタンが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イベントハンドラ追加してやらないといけないのでしょうか？
- sweepea
- お礼率64% (120/187)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<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>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
単純にフラグで管理してみては？ <script> window.onload=function(){ colorFlg=""; var tags=document.getElementsByTagName("input") for(var i=0;i<tags.length;i++){ if(tags[i].name=="color"){ tags[i].onclick=function(){ if(this.value=="y") alert("「黄」がチェックされました"); else if(colorFlg=="y") alert("「黄」がチェックが外れました"); colorFlg=this.value; } } } } </script> <input type="radio" name="color" value="r"> 赤 <input type="radio" name="color" value="b"> 青 <input type="radio" name="color" value="y"> 黄
お礼
ご回答ありがとうございます。 なるほど。こちらの方が正統的な感じがしますね。 「黄」がチェックされているかどうかが知りたいだけなので、 少し無駄なイベントが増えますが、以下のようにしようと思います。 <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> ありがとうございました。
お礼
ご回答ありがとうございます。 なるほど！document全体にクリックを登録して、イベントがラジオボタンなら、とやってるんですね。 ラジオボタン分ループしてイベントリスナーを登録するより、行数が減りました。JavaScript勉強せねば。。 ありがとうございましたー！