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

質問

ラジオボタンのチェックをはずす方法はありますか？
どなたか教えてください。

クリックしてチェックが入り再度クリックすると外れると言うようなしくみにしたいのです。

JavaScriptを使わずに簡単にできないでしょうか？
もし不可能でしたら、JavaScriptでの方法を教えて頂けると助かります。

宜しくお願い致します。

回答No.6

namiri_e · ベストアンサー

どういう風になっているのか理解し切れていないまま書いていますが…

（1）●A　（●Y1　○Y2）
（2）○B　（○Y1　○Y2）　こういう状態からB-Y1を選んだとき

（1）○A　（○Y1　○Y2）
（2）●B　（●Y1　○Y2）　こういう状態になればいいのですか？

項目Y1、Y2とその左のA、Bは連動しているのでしょうか？
（たとえば、はじめの状態でB-Y1をクリックしたときにA/Bのラジオボタンも同時に変化するかどうかということです。）
そうでないなら、単にA-Y1,A-Y2,B-Y1,B-Y2の４つをグループ化すればどうですか？

お礼

回答ありがとうございます。
グループ化も考えたんですが、なにかうまく行かなかった気がします。（勘違いかも…）

（1）●A　（●Y1　○Y2）
（2）○B　（○Y1　○Y2）　こういう状態からB-Y1を選んだとき

（1）○A　（●Y1　○Y2）
（2）●B　（●Y1　○Y2）　こういう状態なるのを防ぎたいのです。

4つをグループ化試してみます。
ありがとうございました。

回答No.5

noname#86752

補足を拝見させていただいて、内容が理解できました。
システムとしては不要な方のY1やY2にチェックが残っていても問題ありませんが、使う方としてはチェックが消えたほうが分かりやすくて良いですね。

JavaScriptに関しては詳しい方にお任せしますが、ラジオボタンはどれかにチェックが入っていることが基本的な動作なので、ラジオボタンなのにどれにもチェックがない状態というのは普通のインターフェースではないと思います。

そこで一般的かな？と思われるインターフェースを考えました。
(1)Y0という状態を作って、Aが選ばれたらBのYをY0にする。
(2)Aが選ばれたとき、BのY1やY2を使用不可にする。
（disabled=trueだったかな。これをやると灰色になって使えなくなります。）

(2)の方が普通に見られるインターフェースですが、もしたしたら古いブラウザの場合対応できないかもしれません。

お礼

回答ありがとうございます。
やはりイレギュラーなことなので、なかなか簡単にはいきませんね。(;´д`)トホホ

でも勉強になりました。ありがとうございます。

回答No.4

siteuma

#1です。
うーん、機能しませんか？
もしかしたら#1のソースでいうところの4行目の最後の!が漏れているのかな・・・？
（変な風に改行されてしまっているので分かりにくいのですが）

それはまずおき、成る程、そういうことでしたか。

そういうことならと、ちょいと作ってみました。
（ちょっと癖のある書き方かもしれない点はご容赦）
--------------------------------------
＜input name="chk" id="chk1" type="radio" onClick="check_click(1)"＞A＜/input＞
(＜input name="chk_a" id="chk_a1" type="radio"＞Y1＜/input＞
＜input name="chk_a" id="chk_a2" type="radio"＞Y2＜/input＞)＜br＞
＜input name="chk" id="chk2" type="radio" onClick="check_click(2)"＞B＜/input＞
(＜input name="chk_b" id="chk_b1" type="radio"＞Y1＜/input＞
＜input name="chk_b" id="chk_b2" type="radio" ＞Y2＜/input＞)

＜SCRIPT LANGUAGE=javascript＞
＜!--
function check_click(arg){
if(arg == 1){
document.getElementById("chk_b1").checked=false;
document.getElementById("chk_b2").checked=false;
}else{
document.getElementById("chk_a1").checked=false;
document.getElementById("chk_a2").checked=false;
}
}
//--＞＜/script＞
--------------------------------------
上記のでは、Aにチェックが入っていても、BのY1、Y2にチェックが出来てしまうので、
Aにチェックが入っているときはBのY1、Y2は使用できないようにするなどの制御と組み合わせるといいでしょう。

お礼

ありがとうございました。
やはりjavascriptですね。

私はjavascriptをよく知らないので、
不都合が起きた場合復旧できなそうなので
できれば簡単な方法が良かったのですが…

どの方法も簡単そうじゃないですね(-。-;)
やっぱイレギュラーですもんね。笑

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

回答No.3

EEshiba

えーと、普通にA又はBがチェックされた時に、反対側のY1,Y2をクリアしてやれば良いのでは？
こちらの方が余程簡単だと思いますよ。

補足

反対側をクリアするとはどのようにしたら良いのでしょうか？すいません無知で…(o*。_。)oペコッ

回答No.2

shinkun0114

質問の意味がよく理解できなかったのですが、ラジオボタンはどれかが選択されていることが基本ですので、むしろチェックボックスがお望みの機能ではないかと思います。

参考URLのチェックボックスをご覧下さい。

参考URL：

http://tohoho.wakusei.ne.jp/html/input.htm

補足

すいません。そうなんです。通常ならばおっしゃるとおりなんですが。うまく説明できないのですいません。
例として
■質問1
（1）○A　（○Y1　○Y2）
（2）○B　（○Y1　○Y2）

このようなラジオボタンを作りたいんです。
（1）と（2）がどちらか選ぶようになっていて
その後ろにある（Y1、Y2）のどちらかが選べるようにしたいのです。この場合に（1）AのY1にチェックを入れたが、
やはり（2）のY1に変えたいという場合AとBはどちらか一方にチェックが入るようになるのでAかBになるのですが、
BのY1に入れても前回入れたAのY1にチェックが残ってしまうことを回避したいのです。
Y1,Y2部分をチェックボックスにしてしまうと、どちらにもチェックが入ってしまうということの可能性も大きいと思い出来ればラジオボタンのようにどちらか一方にしかチェックが入らない機能があり、さらにチェックがはずせればいいと思いました。

すいませんダラダラと説明してもやはりわかりづらいですかね・・・

回答No.1

siteuma

結局JavaScriptだけど・・・
（＜＞は半角に読み替えてくださいね）

＜html＞
＜body＞
＜form name="frm"＞
＜input id="chk" type="radio" onClick="document.frm.chk.checked = !document.frm.chk.checked;"＞←Click!＜/input＞
＜/form＞
＜/body＞
＜/html＞

お礼

回答ありがとうございます。
早速試してみましたが、何故が機能しないのです。
チェックが入らない状態です。

すいません。私のやり方が悪いのかも…