javascriptの質問です

<html><body><table>
<input type="button"onclick="reset()"value="リセット"/>
<tr><td><input type="checkbox"></td><td>1</td><td>hoge</td></tr>
<tr><td><input type="checkbox"></td><td>2</td><td>hoge</td></tr>
<tr><td><input type="checkbox"></td><td>3</td><td>hoge</td></tr>
</table></body></html>

というhtmlがあります
たとえチェックボックスがONになっていてもリセットボタンを押したら
一括でチェックが空になるようにしたいのですが
どのようなjacascriptを組めばよろしいでしょうか?
よろしくお願いします

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/01/12 04:04:27
  • 終了:2014/01/19 04:05:03

回答(2件)

id:rsc96074 No.1

rsc回答回数4358ベストアンサー獲得回数3982014/01/12 06:42:54

ポイント250pt

 こちらはいかがでしょうか。

<html>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// 全てのチェックボックのチェックを外す
function reset(){
  for(i=1; i<=3; i++) {
    document.getElementById("ch"+i).checked = false;
  }
}
//-->
</SCRIPT>
</HEAD>

<body><table>
<input type="button" onclick="reset()" value="リセット"/>
<tr><td><input type="checkbox" id="ch1"></td><td>1</td><td>hoge</td></tr>
<tr><td><input type="checkbox" id="ch2"></td><td>2</td><td>hoge</td></tr>
<tr><td><input type="checkbox" id="ch3"></td><td>3</td><td>hoge</td></tr>
</table></body>
</html>

※参考URL
●全てのチェックボックスをチェック/解除する - JavaScript
http://javascript.eweb-design.com/1212_ac.html

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922014/01/12 16:37:11

ポイント250pt
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script>
	function doReset(e) {
		e.form.reset();
	}

	//ボタンとcheckboxが同じformに入っていればthis.formとかで辿れるけどそうじゃない場合は、回答1のようにformやcheckboxに特徴(id,class)を付けてDOM APIで取得しやすくするのも手。

	//checkboxだけ外したいケース
	function doReset2() {
		var checkboxs = document.querySelectorAll('[type="checkbox"]');
		for (var i = 0; i < checkboxs.length; i++) {
			checkboxs[i].checked = false;
		}
	}
	</script>
</head>
<body>
	<input type="reset" value="type:reset"/>
	<input type="button"onclick="this.form.reset()"value="onclick:this.form.reset()"/>
	<input type="button"onclick="doReset(this)"value="function:doReset()"/>
	<form>
		<table>
			<tr><td><input type="checkbox"></td><td>1</td><td>hoge</td></tr>
			<tr><td><input type="checkbox"></td><td>2</td><td>hoge</td></tr>
			<tr><td><input type="checkbox"></td><td>3</td><td>hoge</td></tr>
		</table>
	</form>
</body>
</html>
  • id:Lhankor_Mhy
    ご存じとは思いますが、javascriptを使わずにこれでもできます。
     
    <html><body><form><table>
    <input type="reset" onclick="reset()" value="リセット"/>
    <tr><td><input type="checkbox"></td><td>1</td><td>hoge</td></tr>
    <tr><td><input type="checkbox"></td><td>2</td><td>hoge</td></tr>
    <tr><td><input type="checkbox"></td><td>3</td><td>hoge</td></tr>
    </table></form></body></html>

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません