dポイントプレゼントキャンペーン実施中！

おしえて

EclipseでSpringを使用し、テーブルのチェックボックスを全選択にするには

解決済

  • 質問者：mountain11
  • 質問日時：
  • 回答数：1件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

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;
}
}
}
みたいな感じ
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！！

教えていただいたソースそのままでは動かなかったのですが、
if文を
if(f[i].type == "checkbox" && f[i].name == "CheckedSykCode_New"){
に書き換えたら、実現できました！！

チェックボックスの名前が配列ではないということは、たとえば、1つ目だけチェックを入れる時はどうするんだろう？と疑問に思いましたが、とりあえずやりたかったことは全選択なので実現できて良かったです。

本当にありがとうございました！！

通報する
お礼日時：2016/05/13 12:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報