JavaScriptでラジオボタンのチェックをはずす。

解決済

質問者：satosai
質問日時：2004/09/30 01:02
回答数：5件

２組のラジオボタンを持つHTMLがあるとします。例えばAとB、CとDとします。ただしどちらか１組だけしか選べないようにしたいのです。AもしくはBがチェックされ、CかDにチェックが入っていたら、チェックをはずしたいのです。つまり、ラジオボタンのチェックをはずすFunction（Sub)を作成したいのです。どなたかいいアイデア、書き方わかりますか？

通報する

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

質問の本文を隠す

回答 (5件)

No.1

回答者： g_express999
回答日時：2004/09/30 01:17

方法としては、ＣまたはＤのonClickイベントでFunctionを走らせて、CheckedプロパティがTrueならばＡとＢのCheckedプロパティにFalseをセットしてあげればいいのではないかと思います。

Function(){
if(form.C.checked=True){
form.A.checked=False;
form.B.checked=False;
}
} みたいな？

具体的なソースは、専門家の方にお任せします。

- 0
- 件

通報する

No.2

回答者： BLUEPIXY
回答日時：2004/09/30 01:41

こんな感じでいいかと思います。

アイデアとしては、フォームを分けて、リセットするってことです。
<script type="text/javascript">

</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>

- 0
- 件

通報する

No.3

回答者： nuki
回答日時：2004/09/30 02:42

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>

この回答への補足

やりたい事は、いくつかのラジオボタンといくつかの入力フォームがあって、選んだラジオボタンによって必須の入力フォームが変わるのです。だからラジオボタンの選択が変わったら、必須も変わるのですが、ラジオボタンの選択が変わって、必須項目じゃないフォームに入力されていたら、そこだけクリアしたいのです。できるでしょうか？

補足日時：2004/09/30 23:49

通報する

- 0
- 件

通報する

No.4

回答者： torakiyojp
回答日時：2004/10/04 16:08

> できるでしょうか？

できます。

<form name="form1">
<input type="text" name="text1">
</form>
とあれば、
document.form1.text1.value = "";
でtext1の入力値が消えます。

- 0
- 件

通報する

No.5ベストアンサー

回答者： nuki
回答日時：2004/10/04 18:37

ANo.3の補足を受けて回答します。

必須入力項目が複数グループ存在し、それらをラジオ
ボタンで切り替えることを実現したい、という要望だ
とします。

この場合、使いやすさを考慮すると、ラジオボタンの
切替で必須入力項目グループの有効/無効が望ましい
でしょう。(誤ってラジオボタンを操作した場合、
これまでの入力がクリアされてしまうのは、ユーザの
望まない結果だからです。)
また、無効となったエレメントはサーバに送信されま
せん。

ですので、例えば必須入力項目グループ毎にフォーム
要素のエレメント名のルールを決めて、ループで処理
する方法はいかがでしょうか?

<script type="text/javascript">

</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>