
Eclipseでフレームワーク:springを使って開発している初心者です。
画面上に表(テーブル)があり、各行にチェックボックスがありますが、
「全選択」というチェックボックスにチェックを入れると、
各行のチェックボックス全てにチェックが入るようにしたいです。
javascriptで実現しよいとしましたが、document.~ を認識していないようです。
document.write("Hello"); のコメントを外して実行して全選択のチェックボックスをクリックすると"Hello"と表示されるので、AllChecked() を通ってはいます。
しかし、document.~の文を色々試しましたが、動きません。
解決策をご教授いただきたいです。
<!DOCTYPE html>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
<meta charset="utf-8">
<title>${title}</title>
</head>
<body bgcolor="#FFDAB9">
<h1>${title}</h1>
<p>${message}</p>
<form:form modelAttribute="formKichakuList" name = "kform">
<input type="checkbox" name="AllCheck" onClick="AllChecked();" />全選択<br>
<input type="submit" name="kichaku_update" value="帰着する" ><br>
<input type="button" value="戻る" onClick="javascript:history.back()"><br><br>
<hr>
<c:if test="${datalist != null }" >
<TABLE border="1" id="table01">
<thead>
<tr id = "table01HeadR" bgcolor="#DEB887">
<th>出荷する</th>
<th>出荷コード</th>
<th>登録日時</th>
<th></th>
</tr>
</thead>
<!-- white-space:pre-wrapを指定しても、IEによっては、空白が詰まる場合がある。 -->
<tbody style= "white-space:pre-wrap" id = "table01Body">
<c:forEach var="obj" items="${datalist}">
<%-- <c:forEach var="obj" items="${datalist}" varStatus="status"> --%>
<tr>
<td><form:checkbox path="CheckedSykCode_New" name = "check" value="${obj.出荷コード}" /></td>
<td><c:out value="${obj.出荷コード}"/></td>
<td><c:out value="${obj.登録日時}"/></td>
</tr>
</c:forEach>
</tbody>
</TABLE>
</c:if>
</form:form>
<SCRIPT type="text/javascript">
<!--
function AllChecked(){
// var check = document.form.AllCheck.checked;
// document.write(check);
// for (var i = 0; i < document.form.check.length; i++){
// document.form.check[i].checked = check;
// }
document.form.check.checked = true;
// document.form.check[0].checked = true;
// document.form.elements['check[]'][0].checked = check;
// document.check.elements[0].checked = true;
// document.kform.elements[check[0]].checked = true;
// document.write("Hello");
}
//-->
</SCRIPT>
</body>
</html>
No.1ベストアンサー
- 回答日時:
jQueryとか使わないなら、以下のようなベタな感じでやってください
同じform内で完結しているなら
<input type="checkbox" name="AllCheck" onClick="AllChecked(this);" />全選択<br>
として
function AllChecked(obj){
var check = obj.checked;
var f=obj.form
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" && f[i].name=="'check[]"){
f[i].checked=check;
}
}
}
みたいな感じ
ありがとうございました!!
教えていただいたソースそのままでは動かなかったのですが、
if文を
if(f[i].type == "checkbox" && f[i].name == "CheckedSykCode_New"){
に書き換えたら、実現できました!!
チェックボックスの名前が配列ではないということは、たとえば、1つ目だけチェックを入れる時はどうするんだろう?と疑問に思いましたが、とりあえずやりたかったことは全選択なので実現できて良かったです。
本当にありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景色を変えて未入力チェック...
-
【jsp/Java】チェックボックス...
-
TextBoxに半角数字以外を入れた...
-
onchangeイベントを強制的に発...
-
プルダウンで選択すると、DBの...
-
JavaScript ログアウト処理
-
プルダウンで選択した項目にあ...
-
ブラウザの外にあるマウスの情...
-
return trueとreturn falseの用...
-
【掲示板の機能】投稿時にサイ...
-
Selectボックスの幅を自動で広...
-
ボタンかリンクをクリックする...
-
VB.NETで<Input>タグ、<text...
-
javascriptで画像をテーブルに...
-
sessionの値でボタンを活性・非...
-
RegularExpressionValidatorの...
-
JavaScript:現在フォーカスの...
-
Cookieに保存されない
-
Pythonのプログラミングについ...
-
ラジオボタンにタブインデック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jquery 診断コンテンツにチェッ...
-
チェックボックスのON/OFFでVal...
-
【jsp/Java】チェックボックス...
-
申込フォーム 自動計算、条件に...
-
チェックボックスのON/OFFに応...
-
背景色を変えて未入力チェック...
-
チェックボックスのグループ化...
-
確認ページからフォームページ...
-
checkboxの選択数制限と排他処...
-
特定のID(またはクラス)で括ら...
-
チェックボックス
-
チェックボックスに連動するテ...
-
if文でelseを使わずに否定
-
チェックボックスを使って条件検索
-
チェックボックスの設定
-
オフになっているチェックボッ...
-
Javascript ポップアップウィ...
-
複数あるチェックボックスから...
-
配列のチェックボックスをjavas...
-
JAVASCRIPT
おすすめ情報