- ベストアンサー
JavaScriptでラジオボタンのチェックをはずす。
２組のラジオボタンを持つHTMLがあるとします。例えばAとB、CとDとします。ただしどちらか１組だけしか選べないようにしたいのです。AもしくはBがチェックされ、CかDにチェックが入っていたら、チェックをはずしたいのです。つまり、ラジオボタンのチェックをはずすFunction（Sub)を作成したいのです。どなたかいいアイデア、書き方わかりますか？
- satosai
- お礼率7% (24/304)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ANo.3の補足を受けて回答します。 必須入力項目が複数グループ存在し、それらをラジオ ボタンで切り替えることを実現したい、という要望だ とします。 この場合、使いやすさを考慮すると、ラジオボタンの 切替で必須入力項目グループの有効/無効が望ましい でしょう。(誤ってラジオボタンを操作した場合、 これまでの入力がクリアされてしまうのは、ユーザの 望まない結果だからです。) また、無効となったエレメントはサーバに送信されま せん。 ですので、例えば必須入力項目グループ毎にフォーム 要素のエレメント名のルールを決めて、ループで処理 する方法はいかがでしょうか? <script type="text/javascript"> <!-- // 指定prefixで始まるエレメントを全て、enableで // 指定した有効/無効状態に変更する function toggleElements(prefix, enable) { for (var i = 0; i < sample.length; i++) { if (document.sample.elements[i].name.substring(0, prefix.length) == prefix) { document.sample.elements[i].disabled = !enable; } } } // 指定エレメントの値を元にグループ指定を排他制御する function toggleGroup(element) { var enable = element.value == '1'; toggleElements(enable ? '1_' : '2_', true); toggleElements(!enable ? '1_' : '2_', false); } //--> </script> ... <body onload="document.sample.group[0].click()"> <form name="sample"> <fieldset name="1"> <legend><input type="radio" name="group" value="1" id="1" onclick="toggleGroup(this)"><label for="1">グループ1</label></legend> <input type="radio" name="1_radio" value="a" id="a"><label for="a">A</label> <input type="radio" name="1_radio" value="b" id="b"><label for="b">B</label> </fieldset> <fieldset name="2"> <legend><input type="radio" name="group" value="2" id="2" onclick="toggleGroup(this)"><label for="2">グループ2</label></legend> <input type="radio" name="2_radio" value="c" id="c"><label for="c">C</label> <input type="radio" name="2_radio" value="d" id="d"><label for="d">D</label> </fieldset> </form> </body>
その他の回答 (4)
- torakiyojp
- ベストアンサー率58% (25/43)
> できるでしょうか？ できます。 <form name="form1"> <input type="text" name="text1"> </form> とあれば、 document.form1.text1.value = ""; でtext1の入力値が消えます。
- nuki
- ベストアンサー率30% (6/20)
JavaScriptを使わずに、ラジオボタンA～Dに同じnameを 指定する方法でも実現できます(下記ソース)が、 JavaScriptでラジオボタンのチェックをはずすソースを 知ることがこの質問の目的なのでしょうか? <form name="sample"> <fieldset> <legend>グループ1</legend> <input type="radio" name="radio1" value="a" id="a"><label for="a">A</label> <input type="radio" name="radio1" value="b" id="b"><label for="b">B</label> </fieldset> <fieldset> <legend>グループ2</legend> <input type="radio" name="radio1" value="c" id="c"><label for="c">C</label> <input type="radio" name="radio1" value="d" id="d"><label for="d">D</label> </fieldset> </form>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
こんな感じでいいかと思います。 アイデアとしては、フォームを分けて、リセットするってことです。 <script type="text/javascript"> <!-- function check(f){ if(f.name=="radio1"){ FORM2.reset(); } if(f.name=="radio2"){ FORM1.reset(); } } // --> </script> ラジオボタンのグループ排他制御 <FORM NAME="FORM1"> <fieldset><legend>グループ１</legend> <input type="radio" name="radio1" value="A" id="A" onclick="check(this)"><label for="A">Ａ</label> <input type="radio" name="radio1" value="B" id="B" onclick="check(this)"><label for="B">Ｂ</label> </fieldset> </FORM> <br> <FORM NAME="FORM2"> <fieldset><legend>グループ２</legend> <input type="radio" name="radio2" value="C" id="C" onclick="check(this)"><label for="C">Ｃ</label> <input type="radio" name="radio2" value="D" id="D" onclick="check(this)"><label for="D">Ｄ</label> </fieldset> </FORM>
- g_express999
- ベストアンサー率29% (115/386)
方法としては、ＣまたはＤのonClickイベントでFunctionを走らせて、CheckedプロパティがTrueならばＡとＢのCheckedプロパティにFalseをセットしてあげればいいのではないかと思います。 Function(){ if(form.C.checked=True){ form.A.checked=False; form.B.checked=False; } } みたいな？ 具体的なソースは、専門家の方にお任せします。
補足
やりたい事は、いくつかのラジオボタンといくつかの入力フォームがあって、選んだラジオボタンによって必須の入力フォームが変わるのです。だからラジオボタンの選択が変わったら、必須も変わるのですが、ラジオボタンの選択が変わって、必須項目じゃないフォームに入力されていたら、そこだけクリアしたいのです。できるでしょうか？