• 締切済み

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

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 にジャンプする アドバイス等よろしくお願い致します。

みんなの回答

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

以下、サンプルです。 関数が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>

関連するQ&A

  • チェックボックスで選択されたデータをリンク先で表示させる方法。

    チェックボックスで選択されたデータを、 リンク先で表示させる方法を質問させていただきます。 ○やりたい事(以下は例) ページA・・・チェックボックスがあるページ ページB・・・Aのデータを表示させたいページ ・ページAにて。 □1 □2 □3 上の様なチェックボックスを作成し、 ■1 □2 □3(■にチェックをつけているものをします) 上のようにチェックをつけます。 ページAにあるページBへのリンクをクリック、 (このときBへのリンクはフォームの送信ボタンではない) ・ページBにて ページAで選択した項目(この場合は「1」)を、 任意の場所に表示させる。 上記の方法をご存知の方がいましたら教えて下さい。

    • ベストアンサー
    • HTML
  • EXCEL:フォームで作成したチェックボックス選択したのものみ表示

    EXCELのフォームのチェックボックスやグループ化したオプションボタンを多数使用したシートがあります。 チェックや選択したオプションボタンに応じて結果が同じシートに表示されるようIF関数を使用してます。 例)チェックボックス(1)「植物」にチェックがあり   グループ(1)はオプションボタン「赤」を選択   グループ(2)はオプションボタン「水」を選択   →『花』と表示   グループ(2)のオプションボタン「緑」を選択した場合は   →『木』と表示 選択した項目をペーパーで確認のために、選択した項目だけ別のシートに表示させ印刷したいのですが何か良い方法はないでしょうか。 チェックボックス一つに対してグループ約5つ というものが10個ほどあります。 チェックボックス(1)をチェックしたら、チェックボックス(1)とグループ(1)~(5)を別シートへ表示するといったようにしたいのですが・・・

  • チェックボックスが未選択の場合自動で全選択にしたい

    検索フォームに「area」という項目を作り、東・西・南・北と4つのチェックボックスがあるとします。 そのすべてが未選択の状態で検索ボタンが押された場合、自動的に東・西・南・北すべてにチェックが入った状態で検索したいのですが、どうしたら可能でしょうか? ページにはjqueryが読み込まれているので、javascriptで実現したいのですが可能ですか?

  • チェックボックスを選択するとテキストボックスが表示

    質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか? <input type="checkbox" name="example" value="" />テレビ ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />新聞 ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />CM ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />その他 ←チェックしたらテキストボックス表示 色々なJavaScriptを試したのですが、 どうも挙動がおかしく、クリックを続けると表示がされたりできなかったり、 という具合になります。 それぞれテキストボックスを表示させたいチェックボックスに 反映できるJavaScriptをご教示願いますでしょうか? 宜しくお願い致します。

  • チェックボックスとボタンの組み合わせによってリンク先を決める

    当方、script等にはまったく持って初心者です。 以下の仕様のJavascriptが作りたいのですが、全然わからないのです・・・。 チェックボックスAとボタンAを押す・・・・1のリンク先へ チェックボックスBとボタンAを押す・・・・2のリンク先へ チェックボックスCとボタンAを押す・・・・3のリンク先へ チェックボックスAとボタンBを押す・・・・4のリンク先へ チェックボックスBとボタンBを押す・・・・5のリンク先へ チェックボックスCとボタンBを押す・・・・6のリンク先へ 見た目的にはこんな感じです。 ------------------- □暇なときに回答ください □困ってます □すぐに回答ほしいです [Aボタン][Bボタン] ------------------- という感じです。 チェックボックスは複数選択する予定はありません。 (なので、チェックボックスではなく、ラジオボタンでも可です)。 チェックボックスを複数選択しない・・というとこへのツッコミはなしでお願いします^^; 何卒よろしくお願いいたします。

  • ラジオボタンの選択によってチェックボックスのチェックできる個数を制限し

    ラジオボタンの選択によってチェックボックスのチェックできる個数を制限したい。 他の方の質問を見たのですがマッチする質問がなかったのでご質問させていただきます。 現在申し込みフォームを作成しているのですが、要件としては、 ラジオボタンの選択によってチェックボックスのチェックできる個数を制限したい。 と思っています。javascriptで実現できると思うのですがなかなかできずに困っております。 <ラジオボタン> ○りんご ○みかん ○めろん ○すいか <チェックボックス> □青森産 □愛媛産 □千葉産 □神奈川産 りんごを選んだ人は、チェックボックスで1つしか選択できないようにしたい。 みかんを選んだ人は、チェックボックスで2つしか選択できないようにしたい。 めろんを選んだ人は、チェックボックスで3つしか選択できないようにしたい。 すいかを選んだ人は、チェックボックスで4つ選択できるようにしたい。 可能であれば制限を超えた場合はアラートを上げたいと思います。 2つまでしか選べませんというように。 大変申し訳ありませんが、参考になるページやソースなどを教えていただければと 思います。よろしくお願い致します。

  • [Javascript]画面上にあるチェックボックスの数!

    こんばんは。 ASPで自動生成(動的ページ)されるページにて、 表示されているチェックボックスの数をJavaScriptで調べることはできませんか? したいことは、ボタンを2つ置いておき、1つはクリックで全部チェックON,もうひとつはOFFということをしたいのです。 宜しくお願いいたします。

  • チェックボックスのチェック

    チェックボックスのチェックして送信した後のページから送信前のページに戻るとチェックボックスがチェックされた状態でブラウザで表示されます 1 2ここにチェックを入れて削除すると 3 1 3戻るを押した時にここにチェックが入ってしまいます javascriptで戻るボタンをつくっていますが他にチェックが残らずにに戻る方法はありますか? <input type=button value="戻る" onClick="history.back()"> よろしくお願いします

    • ベストアンサー
    • HTML
  • チェックボックスのチェックを次のページへ引き継ぐ

    分かり難いかと思いますが、説明させていただきます。 仮に、A.html B.htmlの二つページがあるとします A.html □あああ □いいい □ううう □えええ □おおおお このA.htmlページでチェックをつけたボタンのチェックをB.htmlの同じフォーマットのチェックボックスに反映させたいのです。 チェックボックスは複数選択可能となっています CGIなどは使わないようにJavaScriptで処理したいのです。

  • チェックボックスのチェックした項目の名前を取得したいです。

    チェックボックスのチェックした項目の名前を取得したいです。 HTML+Javascript+CGIでアンケートフォームを作っています。 送信ボタンを押したときに確認画面を表示させたいのですが、チェックボックスの項目をどう扱って良いのかわかりません。 性別を選択するラジオボタンの値の取得(男をチェックしたか、女をチェックしたか)は sex = document.mailform.sex[0].checked ? document.mailform.sex[0].value : document.mailform.sex[1].value このように出来るとのことですが、チェックボックスはどうしたら良いのでしょうか? 好きな食べ物を聞くチェックボックスで、選択項目に ・リンゴ・バナナ・ミカン・イチゴ を用意し、チェックされた項目を 好きな食べ物:リンゴ イチゴ の用に出力したいと思っています。 よろしくお願いします。

専門家に質問してみよう