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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2007/10/25 11:03:11
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答4件)

id:laq No.1

回答回数152ベストアンサー獲得回数4

ポイント5pt

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

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

id:isogaya

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

2007/10/19 12:20:38
id:shiroxcom No.2

回答回数140ベストアンサー獲得回数5

ポイント41pt

<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

id:isogaya

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

2007/10/19 12:24:09
id:Mook No.3

回答回数1314ベストアンサー獲得回数393

ポイント22pt

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


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

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

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

  • getElementById()
  • getElementsByName()
  • getElementsByTagName()

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

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

id:isogaya

ありがとうございます。

2007/10/19 15:47:22
id:Mars No.4

回答回数203ベストアンサー獲得回数20

ポイント22pt

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/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません