チェックボックスが数種類あり最後に送信ボタンを押して、リンクを飛ばしたいと思っています。

どのチェックボックスがチェックされたかによって、(複数チェックのケースありです)その条件によって飛ぶようにしたいのですが、onsubmitをしてfor文を通して、if~else文で条件定義してそれぞれ飛ばしたらいいぐらいはわかるのですが、それ以降が・・・。

本やネットのjavascriptについて書かれているところも読んでみましたがもひとつ具体的にどこをどうすれば良いのかわかりません。

どなたか助けてもらえないでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (1件)

こんな感じでしょうか。



<script language="JavaScript">
<!--
function hoge(){ //送信ボタンが押されたときの処理
if(条件1){
location.href="aaa.html";//条件1に該当するページ
return false;
}else{
location.href="bbb.html";//そうでないときのページ
return false;
}
}
//-->
</script>

条件がもっと多い場合はswitch文がよいでしょう。
switch(値){
case 値1:
location.href="aaa.html";
break;
case 値2:
location.href="bbb.html";
break;
.............
}
といった感じですね。「値」が「値1」のときはaaa.htmlに、「値2」のときはbbb.htmlに…、とジャンプします。
    • good
    • 0

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

このQ&Aと関連する良く見られている質問

Q複数あるチェックボックスからひとつだけ選択

よろしくお願いします。

複数あるチェックボックスから常にひとつだけしか選択できないように
したく、色々調べてみたところ、下記のようなスクリプトを見つけました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>sample</title>
<script type="text/javascript">
var before = null;
function test(e) {

var tgt = e.srcElement ? e.srcElement: e.target;
if (before == tgt && tgt.checkd == true) {
tgt.checked = true;
} else {
var chks = document.getElementsByName('radiolike');
for (var i = 0; i < chks.length; i++) {
if (chks[i] != tgt) chks[i].checked = false;
}
}
before = tgt;
}
</script>

</head>
<body>
<form id="SAMPLE" action="#" onclick="test(event);">
<label for="c1"><input name="radiolike" id="c1" type="checkbox" value="0">Item1</label>
<label for="c2"><input name="radiolike" id="c2" type="checkbox" value="1">Item2</label>
<label for="c3"><input name="radiolike" id="c3" type="checkbox" value="2">Item3</label>
</form>
</body>
</html>

上記のチェックボックス群を同ページに複数置きたいときは、どのよう
にスクリプトを変えたらよいのか分からずとても困っております。

分かりづらい説明で誠に申し訳ありません。
補足説明致しますので、どうかご教授下さいますようお願い致します。

よろしくお願いします。

複数あるチェックボックスから常にひとつだけしか選択できないように
したく、色々調べてみたところ、下記のようなスクリプトを見つけました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" conte...続きを読む

Aベストアンサー

No.4です。

> お教え頂いたスクリプトはSAMPLE1とSAMPLE2でそれぞれに<form>タグがあるのですが、これをFORMタグひとつで動作させることはできるものなのでしょうか?

可能です。

今回のプログラムは、nameが同じ値の<input>タグのチェックボックスが、2つ以上チェックされないように動作するものです。

ですので、この<input>タグのnameを、うまく変えてあげれば、思い通りの動作になるはずです。

Qチェックボックスの取得数値で別のチェックボックスを選択可能に

こんにちは、初めて利用させていただきます。

Javascriptを利用し、下記URLのようなものを作成中です。
http://mag.morirepo.com/test_skill.html
それぞれのテーブルごとに段階を設け、「次の段階に進むためには2ポイント以上消費しなければチェックボックスが表示されない」といったものにしたいのですが、上手くスクリプト書けませんでした。

FirefoxとIEで動作させたいと思っています。
よろしくお願いします。

Aベストアンサー

(1)ご提示のソースの構成という条件で、<table>内の<input>要素は全て
  チェックボックスであると仮定し、そのチェックは省略しています。
(2)同じ段階の項目はinputのname属性が同じであるということを利用して  
  判定しています。 (なので、ご提示の「至近距離技能」のところは
  正しく動作しません。=全部同じnameになっている)
(3)ソースの「onClick="ttlValue()"」と「disabled」の設定は繰り返しが
  多いので、省略できるようにしました。
  下のサンプルのようにすることが可能です。
  (formに代表してonclickを設定しています。)
  (オンロード時に、非表示とdisabledをセットするようにしています)
(4)非表示にしてかつdisabledにするのかどうか不明でしたので(非表示
  だけでもことたりるのか)、一応、disabledにもにしていますが、不要
  ならばはずしてください。
  また、非表示にした時にチェックされている内容をクリアするのか
  どうかも不明でしたので、チェックはそのままです。クリアしたい
  場合は、コメントアウトしてある部分を有効にしてください。
(5)クリックされたらttlValue()が続いて実行されるようになっていますが、
  ttlValue()でやりたいことが良くわからなかったので、とりあえずダミー
  のfunctionになっています。 function ttlValue() を置き換えれば
  そのまま機能するはずです。
  最後の<select>の「onChange="ttlValue()"」は省略できませんので、
  そのまま残しておいてください。

以下、サンプルです。(短くするため、2項目のみに減らしてあります。)
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var i, p = document.getElementById('tableBox').getElementsByTagName('TABLE');
for (i=0; i<p.length; i++) check(p[i]);
}

function test(evt) {
var t = evt.target || evt.srcElement;
if (t.nodeName != 'INPUT' || t.type != 'checkbox') return;
var p = t.parentNode;
while (p.nodeName != 'TABLE') p = p.parentNode;
check(p);
ttlValue();
}

function check(p) {
var n, c, i = 0, e = p.getElementsByTagName('INPUT');
while (e[i]) {
n = e[i].name;
c = 0;
while (e[i] && e[i].name == n) {
if (e[i].checked) c += parseInt(e[i].value);
e[i].disabled = false;
e[i++].style.visibility = 'visible';
}
if (c<2) while (e[i]) {
//e[i].checked = false; //一度消えたらチェックも消す場合
e[i].disabled = true;
e[i++].style.visibility = 'hidden';
}
}
}

function ttlValue() { return; } //←省略しています
</script>
</head>

<body>

<form name="skillForm" onclick="test(event)">
<div id="tableBox">
<p>( )内の数値は必要ポイントです。</p>

<h3>防御技能</h3>
<table cellspacing="0">
<tr>
<td colspan="2" class="top left dankai">第1段階</td>
<td colspan="2" class="top dankai">第2段階</td>
<td colspan="2" class="top dankai">第3段階</td>
<td class="top dankai">第4段階</td>
</tr>
<tr>
<td class="left noLineUnder green">HGリロードタイム</td>
<td class="noLineUnder green">切替速度</td>
<td class="noLineUnder yellow2">PDW</td>
<td class="noLineUnder green">連射タイム</td>
<td class="noLineUnder yellow1">サイレンサー</td>
<td class="noLineUnder green">振る速度向上</td>
<td class="noLineUnder green">リーチ拡張</td>
</tr>
<tr>
<td class="left chBox green"><i>(1)</i>
<input name="bx2Lv1" type="checkbox" value="1" /></td>
<td class="chBox green"><i>(1)</i>
<input name="bx2Lv1" type="checkbox" value="1" /></td>
<td class="chBox yellow2"><i>(3)</i>
<input name="bx2Lv2" type="checkbox" value="3" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx2Lv2" type="checkbox" value="2" /></td>
<td class="chBox yellow1"><i>(2)</i>
<input name="bx2Lv3" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx2Lv3" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx2Lv4" type="checkbox" value="2" /></td>
</tr>
</table>

<h3>身体技能</h3>
<table cellspacing="0">
<tr>
<td colspan="3" class="top left dankai">第1段階</td>
<td colspan="3" class="top dankai">第2段階</td>
<td colspan="2" class="top dankai">第3段階</td>
<td class="top dankai">第4段階</td>
</tr>
<tr>
<td class="left noLineUnder green">衝突抵抗度</td>
<td class="noLineUnder green">探知力向上</td>
<td class="noLineUnder green">ダッシュ回復力増加</td>
<td class="noLineUnder green">上級空挺部隊</td>
<td class="noLineUnder green">隠密性向上</td>
<td class="noLineUnder green">持久力増加</td>
<td class="noLineUnder green">科学攻撃抵抗度</td>
<td class="noLineUnder green">爆発への抵抗</td>
<td class="noLineUnder green">体力増加</td>
</tr>
<tr>
<td class="left chBox green"><i>(1)</i>
<input name="bx3Lv1" type="checkbox" value="1" /></td>
<td class="chBox green"><i>(1)</i>
<input name="bx3Lv1" type="checkbox" value="1" /></td>
<td class="chBox green"><i>(1)</i>
<input name="bx3Lv1" type="checkbox" value="1" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx3Lv2" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx3Lv2" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx3Lv2" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(4)</i>
<input name="bx3Lv3" type="checkbox" value="4" /></td>
<td class="chBox green"><i>(4)</i>
<input name="bx3Lv3" type="checkbox" value="4" /></td>
<td class="chBox green"><i>(5)</i>
<input name="bx3Lv4" type="checkbox" value="5" /></td>
</tr>
</table>
</div>
<div id="LvPt">
Lv.<select name="ch2" onChange="ttlValue()">
<option value="1" selected>1</option>
<option value="2">2</option>
<!-- 以下省略 -->
</select>
残り<INPUT name="result" type="text" value="1" size="3" id="result" /> pt
</div>
</form>
</body>
</html>

(1)ご提示のソースの構成という条件で、<table>内の<input>要素は全て
  チェックボックスであると仮定し、そのチェックは省略しています。
(2)同じ段階の項目はinputのname属性が同じであるということを利用して  
  判定しています。 (なので、ご提示の「至近距離技能」のところは
  正しく動作しません。=全部同じnameになっている)
(3)ソースの「onClick="ttlValue()"」と「disabled」の設定は繰り返しが
  多いので、省略できるようにしました。
  下のサンプルのようにするこ...続きを読む

Q同意チェックボックスはひとつ、遷移先は複数にしたい

探して見つけた↓をWordPressで使わせていただきたいのですが、
WordPressの投稿ページで動きません・・・。

<html>
<head>
<script type="text/javascript">

function goServlet(url){
if (!document.chbox.cBox.checked){
// 同意してない
window.alert("同意して");
}else{
// 同意してる
document.location = url;
}
}
</script>

</head>
<body>
<p>上記、「システム利用規約」に同意します。
<form name="chbox">
<input type="checkbox" name="cBox" >
</form>
</p>
<a href="javascript:goServlet('http://google.com')" >トップページへはこちら</a>
<a href="javascript:goServlet('http://yahoo.jp')" >会員ページへはこちら</a>
</body>
</html>

「"javascript:goServlet('http://google.com')"」
この部分がダメなのだと思うのですが、他の方法を教えていただけないでしょうか・・・。
できましたらformのsubmitで・・・。
(すみませんド素人です)

よろしくお願いします。

探して見つけた↓をWordPressで使わせていただきたいのですが、
WordPressの投稿ページで動きません・・・。

<html>
<head>
<script type="text/javascript">

function goServlet(url){
if (!document.chbox.cBox.checked){
// 同意してない
window.alert("同意して");
}else{
// 同意してる
document.location = url;
}
}
</script>

</head>
<body>
<p>上記、「システム利用規約」に同意します。
<form name="chbox">
<input type="checkbox" name="cBox" >
</form>
</p>
<a href="javascript...続きを読む

Aベストアンサー

IE9 以上なら

<script>
addEventListener('DOMContentLoaded', function(){
var checkAgree = function(ev) {
var agreed = document.forms['chbox'].elements['cBox'].checked;
if (!agreed) {
ev.preventDefault();
alert('同意して');
}
}
var Q = function(s){return Array.prototype.slice.apply(document.querySelectorAll(s))};
Q('a.agreed').forEach(function(a){a.addEventListener('click', checkAgree, false)});
Q('form.agreed').forEach(function(f){f.addEventListener('submit', checkAgree, false)});
}, false);
</script>

<form name="chbox">
<label><input type=checkbox name="cBox"> 上記、「システム利用規約」に同意します。</label>
</form>

<a href="page1.html" class=agreed>リンクで遷移する場合</a>
<a href="page2.html" class=agreed>複数でも大丈夫</a>

<form method=GET action="page3.html" class=agreed>
<button type=submit>サブミットで遷移する場合</button>
</form>
<form method=GET action="page4.html" class=agreed>
<button type=submit>複数でも大丈夫</button>
</form>

IE9 以上なら

<script>
addEventListener('DOMContentLoaded', function(){
var checkAgree = function(ev) {
var agreed = document.forms['chbox'].elements['cBox'].checked;
if (!agreed) {
ev.preventDefault();
alert('同意して');
}
}
var Q = function(s){return Array.prototype.slice.apply(document.querySelectorAll(s))};
Q('a.agreed').forEach(function(a){a.addEventListener('click', checkAgree, false)});
Q('form.agreed').forEach(function(f){f.addEventListener('submit', checkAgree, fa...続きを読む

QチェックボックスのON/OFFに応じて別の複数のチェックボックスも連動ON/OFF

7番のcheckboxをON→1,2,4,5番にチェックもON
7番のcheckboxをOFF→1,2,4,5番にチェックもOFF

という風に動作させる記述をご教示ください。
よろしくお願い致します。


<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<form action="" method="post" name="myform">
去年<br>
1番<input type="checkbox" name="kyonen[]" value="1">1月<br>
2番<input type="checkbox" name="kyonen[]" value="2">2月<br>
3番<input type="checkbox" name="kyonen[]" value="3">3月<br>
今年<br>
4番<input type="checkbox" name="kotosi[]" value="1">1月<br>
5番<input type="checkbox" name="kotosi[]" value="2">2月<br>
6番<input type="checkbox" name="kotosi[]" value="3">3月<br>
7番<input type="checkbox" name="mychk">去年と今年の1、2月をまとめてチェック<br>
</form>
</body>
</html>

7番のcheckboxをON→1,2,4,5番にチェックもON
7番のcheckboxをOFF→1,2,4,5番にチェックもOFF

という風に動作させる記述をご教示ください。
よろしくお願い致します。


<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<form action="" method="post" name="myform">
去年<br>
1番<input type="checkbox" name="kyonen[]" value="1">1月<br>
2番<input type="checkbox" name="kyonen[]" value="2">2月<br>
3番<input type="checkbox" name="kyonen[]" value="3">3月<br...続きを読む

Aベストアンサー

条件が複雑になるともう少し工夫が必要になりますが、
とりあえずはこんな感じでいけると思います。

<html>
<head>
<script type="text/javascript">
function checkFunc(obj){
f=obj.form
for(var i=0;i<f.length;i++){
if((f[i].name=="kyonen[]" || f[i].name=="kotosi[]")&& (f[i].value=="1" ||f[i].value=="2")) f[i].checked=obj.checked
}
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
去年<br>
1番<input type="checkbox" name="kyonen[]" value="1">1月<br>
2番<input type="checkbox" name="kyonen[]" value="2">2月<br>
3番<input type="checkbox" name="kyonen[]" value="3">3月<br>
今年<br>
4番<input type="checkbox" name="kotosi[]" value="1">1月<br>
5番<input type="checkbox" name="kotosi[]" value="2">2月<br>
6番<input type="checkbox" name="kotosi[]" value="3">3月<br>
7番<input type="checkbox" name="mychk" onClick="checkFunc(this)">去年と今年の1、2月をまとめてチェック<br>
</form>
</body>
</html>

条件が複雑になるともう少し工夫が必要になりますが、
とりあえずはこんな感じでいけると思います。

<html>
<head>
<script type="text/javascript">
function checkFunc(obj){
f=obj.form
for(var i=0;i<f.length;i++){
if((f[i].name=="kyonen[]" || f[i].name=="kotosi[]")&& (f[i].value=="1" ||f[i].value=="2")) f[i].checked=obj.checked
}
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
去年<br>
1番<input type="checkbox" name="kyonen[]" value="1">1月...続きを読む

Qネストされたチェックボックスの子孫要素にチェックを入れると、親要素にもチェックされる

<ul>
<li><input type="checkbox" name="A" value="">親A
<ul>
<li><input type="checkbox" name="B" value="" class="second">子A
<ul><li><input type="checkbox" name="C" value="" class="second">孫A</li>
</li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="A" value="">親B
<ul>
<li><input type="checkbox" name="B" value="" class="second">子B
<ul><li><input type="checkbox" name="C" value="" class="second">孫C</li>
</li>
</ul>
</li>
</ul>



3 階層あり、親、子や孫にチェックを入れた時に、その全てに連動してチェックされる方法は
ありますでしょうか ?
親だけチェックして子や孫もチェックされるのはできるのですが、逆ができません。
ちなみに同じつくりのものが下に続くのですが、A と B は連動せず、
ID NAMEも同じものです。

どうぞ、わかる方お願いいたします。

<ul>
<li><input type="checkbox" name="A" value="">親A
<ul>
<li><input type="checkbox" name="B" value="" class="second">子A
<ul><li><input type="checkbox" name="C" value="" class="second">孫A</li>
</li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="A" value="">親B
<ul>
<li><input type="checkbox" name="B" value="" class="second">子B
<ul><li><input type="checkbox" name="C" value="" class="second">孫C</li>
</li>
</ul>
</li>
</ul>



3 階層あり、...続きを読む

Aベストアンサー

構造さえ確定できればできないことはないと思いますが
親をチェックして、子孫にチェックがはいる仕組みなら
孫や子をチェックすると親や子にチェックがはいるとなると
常にすべて同じチェック状態になっちゃいますけどそれって意味あります?

つまり、
親をチェック→子・孫にチェックがはいる
子をチェック→親・孫にチェックがはいる
孫をチェック→親・子にチェックがはいる

つまりどこか一つのチェックで十分では?


人気Q&Aランキング

おすすめ情報