- ベストアンサー
ラジオボタンのチェックが外れた時に、イベントを発生させることはできますか？
例えば、以下のようにラジオボタンが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> ありがとうございました。
関連するQ&A
- ラジオボタンのチェックイベント
ラジオボタンを3つ用意しています。 それぞれはラジオボタンはチェックされた瞬間に、それぞれの画面遷移先を指定したいと思っています。 今現在のソースとしては、 <INPUT type="radio" name="radio" onchange="location.href='○○○.html'">あ <INPUT type="radio" name="radio" onchange="location.href='○○△.html'">い <INPUT type="radio" name="radio" onchange="location.href='○○×.html'">う としていますが、これだと、チェックが離れた瞬間に 遷移するようになってしまいます。 ラジオボタンにチェックした瞬間に画面遷移したいのですが、どうしたらいいのでしょうか? おねがいします。
- ベストアンサー
- HTML
- ラジオボタンにチェックを入れて、テキストボックスのコメントを消すには
どなたかお力を・・・ 宜しくお願いします。 メールフォームを作成していて、 テキストボックス入力欄 ○ラジオボタン01 ○ラジオボタン02 から、１箇所選択してもらうようにしてあります。 テキストボックスに始めから、例を記入してあるのですが、 ラジオボタンにチェックを入れた際に消えるようにしたいのです。 フォームのコメントを消すjavascriptは変更してもらっても構いません。 <INPUT type="text" name="あいうえお" onfocus="if (this.value == '例）Corneometer') this.value = '';" onblur="if (this.value == '') this.value = '例）テスト';" value="例）テスト"> <INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="check_reset(this,10)">ラジオ01 <INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="check_reset(this,11)">ラジオ02
- ベストアンサー
- JavaScript
- ラジオボタンのNullチェック
ラジオボタンがひとつもチェックが入ってない時にエラーを出したいのですがうまくいきません。 <script language="JavaScript1.2"> function chk_Riyu(){ for(idRadio=0; idRadio<frmEntry.optRiyu.length; idRadio++){ if(frmEntry.optRiyu[idRadio].checked) { return true; break; } alert("チェックされてません"); return false; } } </script> <form name="frmEntry" action="aaa.htm" method="post"> <input type="submit" value="理由" onclick="return chk_Riyu()"> <input type="Radio" name="optRiyu" value="1">あああ</td> <input type="Radio" name="optRiyu" value="2">いいい</td> <input type="Radio" name="optRiyu" value="3">ううう</td> このソースだと、一度目はチェックにひっかかるのですが、再度ラジオボタンにチェックを入れて理由ボタンを押してもエラーになってしまいます。 どこかおかしいところがありましたら教えていただけないでしょうか。 すみませんが宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 複数のラジオボタンのチェック
複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか？ 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0～4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------
- ベストアンサー
- JavaScript
- ラジオボタン未チェックの場合のアラート
送信ボタンを押したときに、ラジオボタンが未チェックの場合に、アラートを出すように、 以下の内容でスクリプトを組んでいるのですが、チェックをしても アラートが出てしまいます。 あまりjavascript強くないので、自分では限界なので どなたか分かる方いらっしゃいましたらご指摘お願いします。 【HEAD内スクリプト】 function beforeSubmit(){ if(F1.NOUHIN[0].checked == false || F1.NOUHIN[1].checked == false || F1.NOUHIN[2].checked == false || F1.NOUHIN[3].checked == false || F1.NOUHIN[4].checked == false || F1.NOUHIN[5].checked == false){ alert("ご希望の納品時間を選んでください"); return false; } } 【BODY内ソース】 <form name=F1 action=mailto:****?subject=ORDER method=post encType=text/plain onSubmit="return beforeSubmit()" method="post" enctype="text/plain"> <input type="radio" name="NOUHIN" value="指定なし">指定なし <input type="radio" name="NOUHIN" value="午前">午前 <input type="radio" name="NOUHIN" value="14～16時">午後2～4時 <input type="radio" name="NOUHIN" value="16～18時">午後4～6時 <input type="radio" name="NOUHIN" value="18～20時">午後6～8時 <input type="radio" name="NOUHIN" value="20～21時">午後8～9時 </form>
- ベストアンサー
- JavaScript
- ラジオボタンの未選択チェックについて
ラジオボタンの未選択チェックに困っています！ フォームにInputして、CGIで送信するように設定しています。 但し、送信内容を管理者がメール受信するため、ラジオボタンの「name」は漢字にしています。 ＜name＞ ＜value＞ Webの見やすさ ＝ 見やすい と表示されるようにです。 <INPUT type="radio" name="Webの見やすさ" value="見やすい" id="Q11"><label for="Q11"> 見やすい</label> <INPUT type="radio" name="Webの見やすさ" value="特に問題ない" id="Q12"><label for="Q12"> 特に問題ない</label> <INPUT type="radio" name="Webの見やすさ" value="ふつう" id="Q13"><label for="Q13"> ふつう</label> <INPUT type="radio" name="Webの見やすさ" value="やや見にくい" id="Q14"><label for="Q14"> やや見にくい</label> <INPUT type="radio" name="Webの見やすさ" value="見にくい" id="Q15"><label for="Q15"> 見にくい</label></TD> この場合、ラジオボタンの未選択チェックは、どのようにしたら いいのでしょうか？ 今までは、「name」を英数にしていたので、下記のようにしていました。 <script language="JavaScript"> <!-- function chk(oj) { if ((oj.Q1[0].checked == false) && (oj.Q1[1].checked == false) && (oj.Q1[2].checked == false) && (oj.Q1[3].checked == false) && (oj.Q1[4].checked == false)) { alert("Ｑ１のボタンが未選択です"); return false ; } else { return true ; } }//--> </script> 初心者のため、何を変えたらいいのか・・・ホームページを調べたのですが分かりませんでした。 「name」が漢字の場合、どのように指示したらいいのか、ぜひぜひご教授願います。 どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- テキストボックスに入力されたらラジオボタンにチェック
いつもお世話になっております。 タイトル通りなのですが テキストボックスに入力された時に、チェックボックスや ラジオボタンににチェックが付くようなJavaScriptを思考しています。 test.php ---------------------------------------- <form name="form1" method="post" action="test.php"> <input type="checkbox" name="235[]" value="1"> <input name="394" type="text" style="ime-mode: active" onchange="text_check('235')" value="" /> </form> script.js ---------------------------------------- function text_check(nm) { obj = document.form1; alert(obj.elements[nm + '[]'].length); // アラートで「undefined」と出てしまう。 for( i=0; i<obj.elements[nm + '[]'].length; i++){ obj.nm[i].checked = true; } } フォームのラジオボタン、テキストボックスのname属性は 数字じゃない場合は、問題なさそうなのですが 数字の場合だとうまく動作してくれません。 name属性を変更することは考えていません。 ご教示よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ラジオボタンについて
つまらない質問ですがどうか教えてください。 <form name="myform"> ・ ・ ・ <INPUT TYPE="RADIO" NAME="R1" VALUE="1">関連あり</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="2">関連なし</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="3">不明</INPUT> </form> 上記のようなラジオボタンを作ったのですが、 このラジオボタンのチェックされた値を取得するには document.myForm.cGyoumu.value ではできないのでしょうか？ LOOPさせながらdocument.myForm.elements(i).checked で探さないと取得できないのでしょうか？ 同じフォーム内にラジオボタンが複数あるため、 この方法はあまりやりたくありません。 ほかに方法がありましたら、どうか教えてください。
- ベストアンサー
- JavaScript
- ラジオボタンについて
ラジオボタンのオブジェクトにcheckedプロパティはあるのでしょうか？ ラジオボタンは基本的に１つしか、値を取らないので 例えば以下の場合、可にチェックがあれば、kokugoの値は「可」 ということでしょうか？ <input type="radio" name ="kokugo" value="優">優 <input type="radio" name ="kokugo" value="良">良 <input type="radio" name ="kokugo" value="可">可 <input type="radio" name ="kokugo" value="不可">不可
- ベストアンサー
- JavaScript
- チェックボックス/ラジオボタン
ＣＧＩを勉強中です。 まだ無料で配布されているＣＧＩをカスタムするくらいしかできないレベルです。 今度やりたいのが、チェックボックス/ラジオボタンどじらでもいいのですが、 こちらに送られてくるメールフォームで選択されているものは仮に「Ｙ」 選択されていないものは「Ｎ」という形で受け取りたい場合はどのように したらできるのでしょうか？ よろしくお願いします。 <input type="checkbox" name="みかん" value="みかん" />みかん <input type="checkbox" name="りんご" value="りんご" />りんご <input type="checkbox" name="メロン" value="メロン" />メロン <input type="radio" name="みかん" value="みかん">みかん <input type="radio" name="りんご" value="りんご">りんご
- ベストアンサー
- CGI
お礼
ご回答ありがとうございます。 なるほど！document全体にクリックを登録して、イベントがラジオボタンなら、とやってるんですね。 ラジオボタン分ループしてイベントリスナーを登録するより、行数が減りました。JavaScript勉強せねば。。 ありがとうございましたー！