javascriptのチェックボックスについて

似たような質問をしてしまい申し訳ありませんが宜しくお願いします。

登録した情報を一覧で表示させて、そこにjavascriptでチェックボックスを作りチェックを入れたIDはすぐ下に表示させるように作りました。

（例）

会社名：A会社
姓名：おにぎり □（チェックボックス）送信 ←（ボタン）

会社名：B会社
姓名：サンドウィッチ □（チェックボックス）送信 ←（ボタン）

会社名：C会社
姓名：ハンバーグ（チェックボックス）送信 ←（ボタン）

                                    ↓ 会社Cにチェック入れて送信ボタンを押すと

会社名：C会社
姓名：ハンバーグ（チェックボックス）送信 ←（ボタン）

とすぐ下に表示させているつもりなのですが、表示されません。
どこが間違っているかご指導頂ければと思います。宜しくお願いします。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>印刷選択</title>


<script type="text/javascript" language="javascript">
	function onButtonClick() {
		check = document.form.Checkbox.checked;

		target = document.getElementById("output");
		if (check == true) {
			target.innerHTML = "account.getCompanyName<br/>";
		} else {
			target.innerHTML = "チェック項目がチェックされていません。<br/>";
		}
	}
</script>


</head>
<body>
	<%=resultList.size()%>
	<div align="center">
		<h1>
			<FONT color="slategray">印刷選択</FONT>
		</h1>
	</div>
	<hr size="10" color="slategray">
	<%
		if (resultList != null) {
	%>
	<%
		try {
				for (int i = 0; resultList.size() >= 0; i++) {
					Account account = resultList.get(i);
	%>
	<form name="form" action="">
		<input id="Checkbox" type="checkbox" /> <label for="Checkbox">
		会社名：<%=account.getCompanyName()%>
		名前：<%=account.getLastName()%><%=account.getFirstName()%></label>
		<input type="submit" value="印刷確認" onclick="onButtonClick();" />
	</form>
	<div id="output"></div>
	<br> ------------------------------------------------------------
	<br>

	<%
		}
			} catch (IndexOutOfBoundsException e) {
				e.printStackTrace();
			}
		}
	%>
</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

提供しているソースをHTMLに修正してJSを修正しました。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>印刷選択</title> <script type="text/javascript" language="javascript"> function onButtonClick(number) { switch (number){ case 1: target = document.getElementById("output1"); check = document.getElementById("checkbox1").checked; //実行する文; break; case 2: target = document.getElementById("output2"); check = document.getElementById("checkbox2").checked; //実行する文; break; case 3: target = document.getElementById("output3"); check = document.getElementById("checkbox3").checked; //実行する文; break; } if (check == true) { target.textContent = "チェック項目がチェックされている。"; } else { target.innerHTML = "チェック項目がチェックされていません。"; } return false; } </script> </head> <body>  <div align="center"> <h1> <FONT color="slategray">印刷選択</FONT> </h1> </div> <hr size="10" color="slategray">  <form id="form1" action=""> <input id="checkbox1" type="checkbox" /> <label for="Checkbox"> 会社名：A 名前：AA</label> <input type="submit" value="印刷確認" onclick="return onButtonClick(1);" /> <div id="output1"></div>

<br> ------------------------------------------------------------
<br>

</form>

<form id="form2" action="">
    <input id="checkbox2" type="checkbox" /> <label for="Checkbox">
    会社名：B
    名前：BB</label>
    <input type="submit" value="印刷確認" onclick="return onButtonClick(2);" />
    <div id="output2"></div>
    <br> ------------------------------------------------------------
	<br>

</form>

<form id="form3" action="">
    <input id="checkbox3" type="checkbox" /> <label for="Checkbox">
    会社名：C
    名前：CC</label>
    <input type="submit" value="印刷確認" onclick="return onButtonClick(3);" />
    <div id="output3"></div>
          
	<br> ------------------------------------------------------------
	<br>

</form>

</body> </html> ------------------------------------------------------------------------------

kumatarouさんのソースから修正すべき部分は
<% %>を使い、idを別々のを設定したりすべきです。

投稿2015/12/02 08:34

liguofeng29

総合スコア801

kumatarou

2015/12/03 00:48

解答ありがとうございます。思った通りに動きました！仮になのですが、DBに情報を入れて、その情報をListに入れてfor文で回し一覧画面に表示させて、そこにチェックボックスを作った場合、うまく稼働しますか？（リクエストパラメータは１つのものに対して１つしか送信することができないのでfor文で回した場合、可能かどうか教えて頂けると幸いです）

liguofeng29

2015/12/03 02:07

なるべくタグを使うのをおすすめします。可読性を向上になるので。後は意図する質問とあってるか微妙ですが、 <html:select property="selectList" value="${ selectList }" multiple="true"> <c:forEach var="po" items="${ selectList }"> <html:option value="${ po }">${ po }</html:option> </c:forEach> </html:select> 上記コードは、servlet内でselectListを入れるとループしてHTMLを生成します。その際に必要なHTML要素を書けばいいかと思いますね。

kumatarou

2015/12/10 01:30

返信が遅くなってしまい申し訳ありません。解答ありがとうございます無事できましたのでご連絡差し上げました。

行動規範の内容に同意します

一つのHTML上で同じID属性値は複数存在できません。
getElementById() は始めにHITした要素を返します。

それから、サンプルをUPする際にはHTMLとしての体裁が整ったものを書くようにお願いします。
サーバサイドスクリプトのコードをそのまま書かれてもどんなHTMLが出力されるのか明確にはわかりません。
会社名等は「会社A」などの適当な文字でいいのでJavaScriptが最低限動く形でのHTMLを書くようにお願いします。

Re: kumatarouさん

投稿2015/12/02 05:59

think49

総合スコア18162

kumatarou

2015/12/02 07:38

回答ありがとうございます。＞一つのHTML上で同じID属性値は複数存在できません。そうだったのですね。勉強になりました。＞getElementById() は始めにHITした要素を返します。始めにHITした値しか返せないということでしょうか？＞最低限動く形でのHTMLを書くようにお願いします。大変申し訳ございませんでした。もし宜しければURLを載せますのでお時間あれば確認いただければと思います。 http://localhost:8080/BusinesscardControlSystem/PrintServlet

think49

2015/12/02 07:53

> 始めにHITした値しか返せないということでしょうか？そうですね。複数の要素ノードを扱う場合はclass属性値を付与するか、input[name] を付与して下さい。 > http://localhost:8080/BusinesscardControlSystem/PrintServlet localhost はプライベートネットワーク用のホスト名なのでkumatarouさんと同じネットワーク内にPCを接続しないとアクセスできません。他の誰かに見せようとするのでしたらGIPを割り当てて公開してください。もしくはレンタルサーバにUPするか、https://jsfiddle.net/ にUPして下さい。 https://ja.wikipedia.org/wiki/Localhost

kumatarou

2015/12/03 00:39

＞class属性値を付与するか、input[name] を付与して下さい。 2か月前から勉強し始めたので、理解が追いついていません。申し訳ないのですがもう少し詳しくお話頂けると幸いです。＞同じネットワーク内にPCを接続しないとアクセスできません。そうでしたね・・・。拝見させて頂きましたが難易度が高そうなので次回挑戦しようと思います。勉強になりました！ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！