チェックボックスの選択パターンでリンク先変更

締切済

質問者：rinpon777
質問日時：2007/05/10 20:57
回答数：1件

JavaScript を最近始めたばかりですのでカテゴリ違いでしたらすいません。

チェックボックスの選択パターンによって、ボタンをクリックした時に表示されるページが変わるようにしたいです。

【例】

---------------
□項目1
□項目2
□項目3
[ ボタン ]
---------------

1を選択してボタンをクリック → 1.html にジャンプする
2を選択してボタンをクリック → 2.html にジャンプする
3を選択してボタンをクリック → 3.html にジャンプする
1と2を選択してボタンをクリック → 12.html にジャンプする
2と3を選択してボタンをクリック → 23.html にジャンプする
1と3を選択してボタンをクリック → 13.html にジャンプする
1と2と3を選択してボタンをクリック → 123.html にジャンプする

アドバイス等よろしくお願い致します。

通報する

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

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： steel_gray
回答日時：2007/05/11 00:11

以下、サンプルです。

関数が2種類ありますが、使いやすい方を選んで使って。

jump1 は飛び先のファイル名が自由に決められる
（飛び先を全て書き出しておく必要があるので面倒だけど自由度は高い）

jump2 の飛び先は組み合わせで自動的にファイル名が決まる。
（自動で決まるので楽だけど自由度は少ない）

<html>
<head>
<title>さんぷる</title>
<style type="text/css">
#checklist{
list-style-type:none;
margin:0;padding:0;
}
#checklist li{
margin:0;padding:0;
}
</style>
<script type="text/javascript">
function jump1(){
var clist = document.getElementById('checklist').getElementsByTagName('input');
var URLlist = new Array();
URLlist['100'] = '1.html';
URLlist['010'] = '2.html';
URLlist['001'] = '3.html';
URLlist['110'] = '12.html';
URLlist['101'] = '13.html';
URLlist['011'] = '23.html';
URLlist['111'] = '111.html';
var condition='';
for(var i=0;i<clist.length;i++) {
condition += (clist[i].checked)?'1':'0';
}
if(condition == '000') {
alert('チェックが一つもありません');
return;
}
//alert(URLlist[condition]);return; //テスト用
location.href=URLlist[condition];
}
function jump2(){
var clist = document.getElementById('checklist').getElementsByTagName('input');
var condition='';
for(var i=0;i<clist.length;i++) {
condition += (clist[i].checked)?i+1:'';
}
if(condition == '') {
alert('チェックが一つもありません');
return;
}
//alert(condition+'.html');return; //テスト用
location.href=condition+'.html';
}
</script>
</head>
<body>
<ul id="checklist">
<li><input type="checkbox" id="cb01"><label for="cb01">項目1</label></li>
<li><input type="checkbox" id="cb02"><label for="cb02">項目2</label></li>
<li><input type="checkbox" id="cb03"><label for="cb03">項目3</label></li>
</ul>
<p><input type="button" value="ボタン" onclick="jump1()"></p>
</body>
</html>