電子書籍の厳選無料作品が豊富!

JSPによる開発をしているのですが、動的処理が必要になりJavaScriptを使うことに成ったのですが上手くいかないので教えて頂けないでしょうか。

チェックボックスとボタンがあり、ボタンを押すとチェックボックスにチェックを入れたか判定をしてチェックがあればどのチェックボックスにチェックを入れたかをreturnさせたいのですが、どうすればいいのでしょうか?

不足がありましたら仰ってください。
宜しくお願いします。

A 回答 (7件)

長文失礼。


チェックされた項目全てを返すのはANo.2でできますが、
いちおう、ANo.2の解説を(解説サイトなどに載ってなさそうなことだけを)

もしエラーが出ていれば、
c.concat(略);
の部分を、
c.push(略);
にしてみてください。

> <button onclick="alert(a())">
re=a();
alert(re);
を1行で書いたのと同じになります。
さらに別の関数にして呼び出すと、下のようになります。

function f(){
var re=a();
alert(re);
}

<button onclick="f();">


> チェックされている全ての項目(番号?)を返したいのでtrue/falseより配列で戻したいのです。
もしチェックされた項目だけをサーバー側で処理したいというのであれば、JavaScriptで何もしなくても、そのままフォームを送信すれば、チェックされた項目だけが送信されます。

> どんな条件分岐をさせたくて、どのようにif文を書かれたのでしょうか?
> また、どんなデータをreturnさせたくてどの様に書かれたのでしょうか。
> 最低1個のチェックボックス(選択項目)からチェックされているかどうかの条件分岐→チェックされている項目全てをreturn
チェックされている項目全てをreturnすれば、
1つもチェックされていない場合は長さ0の配列が返されます。
returnした先でre.lengthを調べればチェックされた項目の数がわかりますし、
その配列の内容はチェックされた項目の値が入っています。

> <%= a.get(loop) %>
> <%= t.get(loop) %>
aやtの中に何が入ってるのかわかりませんし、JSPを解析するのが面倒なので、(というかa~gは今回の質問とは無関係では?)
できればJSPのソースではなく、JSPから出力されたHTMLを書いてください。(あと、JavaScriptのcheckbox_count()とcheck()の部分も(^^;)
(私の方はだいたいわかったので書いてもらう必要はありませんが、他の方がほしいと言われるかも知れません。
ANo.2やこの回答でわかったのなら、書いてもらわなくても良いですが。)

> <input type="checkbox" name="rental" onClick="checkbox_count(<%=loop%>)">
valueを入れた方が良いですよ。
例:value="<%=loop%>"
a()の戻り値の配列にこの値が入ります。
checkbox_countで何をしているのかわかりませんが、
もしチェックされたかどうかの確認だけなら、check()で一括して確認出来ますから、このタイミングでチェックする必要はありません。
    • good
    • 0
この回答へのお礼

talooさん

ありがとうございます。

>もしチェックされた項目だけをサーバー側で処理したいというのであれば、JavaScriptで何もしなくても、そのままフォームを送信すれば、チェックされた項目だけが送信されます。
試しましたところ出来ました。
言われてみれば<form>の中にあるのですから送信されますよね。

>1つもチェックされていない場合は長さ0の配列が返されます。
チェックが一つもない場合はreturnさせずにalertで警告(?)みたいにしようかと思っています。

>JSPから出力されたHTMLを書いてください。
出力されたHTMLというのはどこに出来るのでしょうか。

check_count()ではチェック上限を設定していますので、checkboxをクリックしたときにカウントさせています。
check()ではチェックされた項目だけをreturnさせたいと思い作りました。

a~gはVectorで、同じサイズのものです。
最終的にはこれらVectorとチェック項目を次のページに持っていきたいのですが・・・。

お礼日時:2006/11/03 20:42

なんだか・・・やたら無駄に複雑になっちゃってる気がしますが・・・


コレじゃダメですか?
<SCRIPT>
function test(aName){
var ret=0;
var objs=document.getElementsByName(aName);
for(var i=0;i<objs.length;i++) if(objs[i].checked) ret++;
return ret;
}
</SCRIPT>

<input type="button" value="チェック数を調べる" onClick="if(test('rental3')>=3) alert('3個以上のチェックは出来ません');">
    • good
    • 0
この回答へのお礼

NTJさん

回答ありがとうございます。

記載して頂いた方法ですとチェックボックスにチェックを入れた段階でalertが出せませんよね。
チェックボックスにチェックを入れた段階でalertさせたいので別々に分けています。

説明不足ですみませんでした。

一応、思うように動作するようになりましたので〆させて頂きます。
回答してくださった方ありがとうございました。

お礼日時:2006/11/06 13:12

>>JSPから出力されたHTMLを書いてください。


>出力されたHTMLというのはどこに出来るのでしょうか。
ブラウザでアクセスしてソースを表示

説明に不必要な部分を適宜削除してもらったり、同じ事の繰り返しを省略してソースを短くしてもらえるとわかりやすくなります(^^)


> チェックが一つもない場合はreturnさせずにalertで警告(?)みたいにしようかと思っています。
逆に言うと、1つでもチェックがあればtrueを返し、1つもチェックがなければfalseを返す。
falseが返ってきたらalertで警告する。
つまり、配列を返さなくても、ANo.1のアレンジ(ループをしてフォームの各項目をチェックする)で可能になります。

チェックボックスにチェックされているかどうかのサンプルをいくつか見られていると思いますが、
配列を返さずにtrue/falseしか返さないのは、それだけで十分だからです。
(チェックされた項目だけを送信するのは、HTMLの機能で十分だから)

> 最終的にはこれらVectorとチェック項目を次のページに持っていきたいのですが・・・。
他の方も回答されていますが、
全ての項目を引き継ぐなら、<input type="hidden">にしたり、クッキーを使う。
各項目の内、チェックされた項目だけを引き継ぐなら、チェックボックスのvalueに入れることで可能です。

HTML+JavaScript(クライアントサイド)とJSP(サーバーサイド)のそれぞれの特徴を勉強すれば、結構簡単に作り直せるかも知れません(^^)

この回答への補足

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<script Language="JavaScript"><!--
function checkbox_count(n,num)
{
count = 0;
st = "";
for (i=0; i<num; i++) if (document.check_count["rental"+i].checked)count++;
if (count > 3)
{
alert("3個以上のチェックは出来ません");
document.check_count["rental"+n].checked = false;
}
}
// --></script>
<noscript>
JavaScript対応ブラウザで表示してください。
</noscript>


<script Language="JavaScript">
<!--
function check(num)
{
count = 0;
for (i=0; i<num; i++){
if (document.check_count["rental"+i].checked){
count++;
}
}

if(count <= 3 && count > 0){
document.check_count.submit();
}
else if(count > 3){
return false;
}
else{
return false;
}
}
// -->
</script>
<noscript>
JavaScript対応ブラウザで表示してください。
</noscript>

</head>

<body>


<form name="check_count" action="rental.jsp" method="POST">


<table BORDER="1"><tbody BORDER="1"><tr>
<td>
<input type="checkbox" name="rental3" onClick="checkbox_count(3,4)">
</td>

<td width="100">
abcde
</td>
<td width="100">
EFGHI
</td>
<td width="100">
A
</td>
<td width="100">

</td>
<td width="100">

</td>

</tr></tbody></table>


<br><br>

<input type="button" value="チェック数を調べる" onClick="check(4)">

</form>

</body>
</html>

補足日時:2006/11/04 08:41
    • good
    • 0
この回答へのお礼

talooさん

何度もすみません。

補足のほうに記載しました。
検索させ結果4個出た後のソース部分です。(内3個は削除しました)
後は不要そうな部分だけ消してあります。

チェックされた項目を引き継がせることは出来ました。

>全ての項目を引き継ぐなら、<input type="hidden">にしたり、クッキーを使う。
クッキーについて勉強したことがないので余り手を出したくないところです。
<input type="hidden">にするとのことですが、これはVector自体をvalueに入れるということなのでしょうか?

お礼日時:2006/11/04 08:54

>記載して頂いた関数でreturnしている変数cをJSP内でも使えるようにしたいと言えばいいのでしょうか。



JSPは素人なんですが、単純に考えたら、クライアントサイドのスクリプトからサーバーサイドに値を渡すならクライアントサイドで取得した値をサーバーに送信すれば良いのではないでしょうか。

例えば、getで送ってそれを切り取ってサーバーサイドで使うなどをPerlではやれますけどね。
window.location="index.cgi?array="+a()
これでJavaScriptを使って”./index.cgi?array=returnされた値”をサーバーにリクエストできます。
このURLをPerl側で”array=returnされた値”を切り取って使えばJavaScriptの値を使うことができます。
もちろん普通にsubmit、method="post",method="get"でも良いです。
この時は送信したい値を隠しフィールド(type="hidden")のvalueに入れて送信すれば良いと思います。

それかクッキーを使っても良いのではないでしょうか。

JSPに付いては全く無知なので見当違いならすみません。
    • good
    • 0
この回答へのお礼

dshguskdigさん

回答ありがとうございます。

Perlやクッキーについては全くの素人なので余り手を出したくないのが本音です・・・。
どうしても方法が見つからない場合はまたお聞きするかもしれないので、その時はよろしくお願いします。

わざわざ回答していただいたのに申し訳ないです。

お礼日時:2006/11/04 08:34

HTML(どんなフォームなのか)だけでも書いていただけますか?



> if文で条件分岐させ、alertさせることは出来るのですが、条件分岐させた後returnさせたいのですがそこが上手くいかないのです。
どんな条件分岐をさせたくて、どのようにif文を書かれたのでしょうか?
また、どんなデータをreturnさせたくてどの様に書かれたのでしょうか。

> また、true/falseではなく配列を戻したいのですがJavaScriptではtrue/falseしか戻せないのでしょうか?
基本的にどんなデータでも返せますが、無意味なデータを返しても無意味ですから、
チェックされているかどうかを調べるだけなら、普通はtrue/falseしか返しません。(でなければせいぜい1か0くらい)


いずれにしてもJavaScriptを切った環境からどんなデータが送られてくるかわからないので、
(さらにいうと、あなたが書いたHTMLフォームから送信されるとは限りません)
JSPでのチェックは必須ですよ。

この回答への補足

<form name="check_count">
<%
int count = 0;
for(int loop = 0;loop < a.size();loop++){
%>

<table BORDER="1" BORDERCOLOR="#000000" BGCOLOR="#FFFFFF"><tbody BORDER="1" BGCOLOR="#FFFFFF"><tr>

<td>
<input type="checkbox" name="rental" onClick="checkbox_count(<%=loop%>)">
</td>

<td width="100">
<%= a.get(loop) %>
</td>
<td width="100">
<%= t.get(loop) %>
</td>
<td width="100">
<%= l.get(loop) %>
</td>
<td width="100">
<%= f.get(loop) %>
</td>
<td width="100">
<%= g.get(loop) %>
</td>

</tr></tbody></table>

<%
}
%>

<br><br>

<input type="button" value="チェック数を調べる" onClick="check(<%=a.size()%>)">

</form>

フォーム部分だけですが。
多数の中から検索し、結果の中から更に選択できるようにさせたいのです。
買い物籠みたいなものでしょうか?
チェックされている全ての項目(番号?)を返したいのでtrue/falseより配列で戻したいのです。

>どんな条件分岐をさせたくて、どのようにif文を書かれたのでしょうか?
>また、どんなデータをreturnさせたくてどの様に書かれたのでしょうか。
最低1個のチェックボックス(選択項目)からチェックされているかどうかの条件分岐→チェックされている項目全てをreturn
これを行いたいのです。

>JSPでのチェックは必須ですよ。
今はreturnさせたいので、JSPでのチェックは考えていませんでした。
return出来たら、その後考えたいと思います。

まだ不足情報がありましたら仰ってください。

補足日時:2006/11/02 22:02
    • good
    • 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<HTML>
<HEAD><TITLE>チェック状態</TITLE></HEAD>
<BODY>
<form name="form0">
<input type="checkbox" name="checkbox0">a
<input type="checkbox" name="checkbox0">b
<input type="checkbox" name="checkbox0">c
<button onclick="alert(a())">checkbox Check</button>
</form>
<script type="text/javascript">
<!--
function a(){
c=new Array()
for(var i=0;i<document.form0.checkbox0.length;i++){if(document.form0.checkbox0[i].checked){c=c.concat(document.form0.checkbox0[i])}}
return c
}
//-->
</script>
</BODY>
<HTML>

敢えて書けばこのようなことですか?
trueのチェックボックスが返ってアラートされます。
内容は[object]なんてでると思います。

でも、この場合document.form0.checkbox0[x].checkedでxを変更すればチェック状態を参照できますからね。
ですからtrueを取り出して配列を作ることにあまり意味はないと思いますので、私の思い違いならこの回答は無視してください。
    • good
    • 0
この回答へのお礼

dshguskdigさん

ありがとうございます。
ボタンを押した後JavaScript関数を呼び出すとなるとonClick="・・・"となります。
Javaのようにhensuu=a();のようには出来ないのかなと思い質問させて頂いています。
記載して頂いた関数でreturnしている変数cをJSP内でも使えるようにしたいと言えばいいのでしょうか。

説明不足ですみませんでした。

お礼日時:2006/11/02 22:39

<html>


<body>
<form>
<input type="checkbox" value="x">
<input type="button" value="OK">
</form>
</body>
</html>

フォームの状態がこうなっているって事でよいですか?
ならば
<html>
<head>
<script>
<!--
function func(){
if(document.fname.chk.checked){
alert("押されてるよ");
} else{
alert("押されてないよ");
}
}
// -->
</script>
</head>
<body>
<form name="fname">
<input type="checkbox" name="chk" value="x">
<input type="button" name="btn" value="OK" onClick="func()">
</form>
</body>
</html>

こうかな?未確認ですが(^_^;)

参考URL:http://www.tohoho-web.com/js/form.htm#ElmButton

この回答への補足

PED02744さん

ありがとうございます。

<form>にはnameつけてあります。

if文で条件分岐させ、alertさせることは出来るのですが、条件分岐させた後returnさせたいのですがそこが上手くいかないのです。
また、true/falseではなく配列を戻したいのですがJavaScriptではtrue/falseしか戻せないのでしょうか?
いくつかサイトを見てはいるのですが、どこもtrue/falseしか戻していないので・・・。

JavaScriptは始めてでわからないので、根本的な勘違いをしているのかもしれません。
記載不足ですみませんでした。

補足日時:2006/11/02 11:44
    • good
    • 0

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