- 締切済み
チェックの入れ方によってリンク先を変える
お世話になります。 チェックの入れ方によってリンク先を変える方法ですが、 他の回答者様がすでに回答れていまして、解決しているのですが、質問はチェックボックスが3つという想定ですが、4つあるとして、表記している組み合わせ以外の場合は同じページに飛ばすことはできますでしょうか？元の回答は下記です。わかる方がいたらお願いいたします。 <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>
- みんなの回答 （2）
- 専門家の回答
みんなの回答
<!-- 自分の回答があまりにも雑に見えたので補足します。 あまり補足ではない気もするのですがこの回答をそのままテキストエディタに（上の変な記号を含めて）持っていけば使えます。 この説明も含めて持っていっていいです。 ですが、「それは嫌だ。」というのならば先ほどのリンクのZIPを見ていただければ嬉しいです。 このソースで解らない所があったら、 Email : yanorei32@outlook.com までよろしくです。件名に「チェックボックスの件」とでも入れていただければ幸いです。質問者様以外のメールにもできるだけ返答します。 数を変えるやり方。 「項目1」等と書いてある行 <例><li><input type="checkbox" id="cb01"><label for="cb01">項目1</label></li> をコピーして、id="cb01"等と書いてある場所をその番号に合わせ（半角限定）for="cb01"にも同じものを書く。 <例><li><input type="checkbox" id="cb05"><label for="cb05">項目5</label></li> そして、こんな感じになっている場所を探し <例> ["0000","AAA.html"], ["0101","BBB.html"], その行をコピーして左側から項目1234...と順に並んでいるのでそれに合わせてパターンを1010のように入力していく。 数を増やしたらその分すべてのものの数も増やす。 <例> ["00000","AAA.html"], ["01010","BBB.html"], ["11111","XXX.html"], HTMLの名前を変えたい場合は、AAA.html等を変更するだけです。 例外になっているページを変える場合は、このように <例> var other = "CCC.html"; なっている場所を探し、 <例> var other = "ZXCASDQWE.html"; のように変えます。 --> <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 other = "CCC.html"; URL_list = [ ["0000","AAA.html"], ["0101","BBB.html"], ]; var condition=""; for(var i = 0;i < clist.length;i++) { condition += (clist[i].checked)?'1':'0'; } var URL = other; for(var i = 0;i < URL_list.length;i++){ if(URL_list[i][0] == condition){ URL = URL_list[i][1]; } } location.href = URL; } </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> <li><input type="checkbox" id="cb04"><label for="cb04">項目4</label></li> </ul> <p><input type="button" value="ボタン" onclick="jump1()"></p> </body> </html>
HTMLを圧縮したZIPをサーバに置きました。 説明などは全てHTML冒頭に書いてあります。 テキストエディタで読み込んでみてください。 ZIP http://atsites.jp/yanorei/check_box.zip
お礼
お礼遅くなりまして申し訳ありません。わざわざダウンロードまでつけていただきまして恐縮です。 本来であればベストアンサーにしたいところでしたが、事情がありまして、ネットがひらけませんでした。質問が締め切られてしまいました。 ご親切に感謝いたします。大変ありがとうございました。