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

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を組めばよろしいでしょうか?
よろしくお願いします

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● rsc
●250ポイント

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

<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


2 ● Cherenkov
●250ポイント
<!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>
関連質問

●質問をもっと探す●



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