人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

フォームのradio ボタンで、その項目についているチェックをすべて消したいのですが、javascript でどう書くといいのでしょうか? form 全体をreset はしたくないのです。

●質問者: isogaya
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript reset ボタン
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● laq
●5ポイント

http://www004.upp.so-net.ne.jp/sekiuchi/js/contents/ckbox.html

このあたりが参考になりませんか?

◎質問者からの返答

radio の事例なんです。checkbox ではないです。


2 ● しろっくす
●41ポイント

<html>

<head>

<script language="JavaScript"></p> <p><!--</p> <p>function check(obj){</p> <p>for(var i=0;i<document.test.length;i++){</p> <p>if(document.test[i].type=="radio"){</p> <p>document.test[i].checked = obj.false;</p> <p>}</p> <p>}</p> <p>}</p> <p>--></p> <p></script>

</head>

<body>

<form name="test">

<input name="sample" type="radio" />

<input name="sample" type="radio" />

<input name="sample" type="radio" />

<input name="sample" type="radio" />

<input name="sample" type="button" value="clear" onclick="check(this);" />

</form>

</body>

</html>

http://google.com

◎質問者からの返答

うごきました。改行の<P>は勝手にはいっていたようですね。


3 ● Mook
●22ポイント

一応目的は達成されたかもしれませんが、まだオープンしているようなので別の方法での回答です。


やり方は何通りもありますが、下記は名前によって範囲を規定する例です。

<html>
<head>
<script language="JavaScript">
<!---
function clearCheck( obj ){
 var objInputs = obj.form.getElementsByTagName( "input" );
 for(var i=0;i<objInputs.length;i++){
 if( ( objInputs[i].type == "radio" )
 && ( ( objInputs[i].name == obj.name ) || ( obj.name == "all" ) ) ){
 objInputs[i].checked = false;
 }
 }
}
--->
</script>
</head>
<body>
 <form name="myForm">
 <div name="q1">Q1.好きな色は?<br>
 <input name="color" type="radio" value="red" >赤色<br>
 <input name="color" type="radio" value="white" >白色<br>
 <input name="color" type="radio" value="yellow">黄色<br>
 <input name="color" type="button" value="色 初期化" onclick="clearCheck( this );" >
 </div>
 <br><br>
 <div name="q2">Q2.好きな形は?<br>
 <input name="shape" type="radio" value="circle" >○<br>
 <input name="shape" type="radio" value="triangle">△<br>
 <input name="shape" type="radio" value="square" >□<br>
 <input name="shape" type="button" value="形 初期化" onclick="clearCheck( this );" >
 </div>
 <br><br>
 <input name="all" type="button" value="全部 初期化" onclick="clearCheck( this );" >
 </form>
</body>
</html>

動作は同じですが、ID を使えば下記のようにもできます。

<html>
<head>
<script language="JavaScript">
<!---
function clearCheck( idName ){
 var obj = document.getElementById( idName );
 var objInputs = obj.getElementsByTagName( 'input' );

 for(var i=0;i<objInputs.length;i++){
 if( objInputs[i].type == "radio" )
 objInputs[i].checked = false;
 }
}
--->
</script>
</head>
<body>
 <form name="myForm">
 <div id="all">
 <div id="q1">Q1.好きな色は?<br>
 <input name="color" type="radio" value="red" >赤色<br>
 <input name="color" type="radio" value="white" >白色<br>
 <input name="color" type="radio" value="yellow">黄色<br>
 <input name="color" type="button" value="色 初期化" onclick="clearCheck( 'q1' );" >
 </div>
 <br><br>
 <div id="q2">Q2.好きな形は?<br>
 <input name="shape" type="radio" value="circle" >○<br>
 <input name="shape" type="radio" value="triangle">△<br>
 <input name="shape" type="radio" value="square" >□<br>
 <input name="shape" type="button" value="形 初期化" onclick="clearCheck( 'q2' );" >
 </div>
 <br><br>
 <input name="all" type="button" value="全部 初期化" onclick="clearCheck( 'all' );" >
 </div>
 </form>
</body>
</html>

ほかにもオブジェクトを操作するメソッドとして

などがあるので、ケースにより使い分けるとよいでしょう。

http://www.tohoho-web.com/js/dom.htm

◎質問者からの返答

ありがとうございます。


4 ● Mars
●22ポイント

nameを指定したい場合のサンプルです。

<html>
<head>
<title></title>
<script type="text/javascript">
function sample(NAME){
 var LIST = document.getElementsByName(NAME);
 for(var i=0;LIST[i];i++)LIST[i].checked=false;
}
</script>
</head>
<body>
<p>ABC
<input type="radio" name="abc">
<input type="radio" name="abc">
<input type="radio" name="abc">
<input type="button" value="ABCをリセット" onclick="sample('abc')">
</p><p>DEF
<input type="radio" name="def">
<input type="radio" name="def">
<input type="radio" name="def">
<input type="button" value="DEFをリセット" onclick="sample('def')">
</p>
</body>
</html>

http://q.hatena.ne.jp/

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ