Go to Qiita Advent Calendar 2024 Top
LoginSignup
ikon0518
@ikon0518 (o mi)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

チェックボックスの選択によって飛ぶページが変わるようにしたい

Q&A

Closed

HTMLJavaScript

解決したいこと

現在シュミレーションサイトを作っているのですが、フォームにいくつかチェックボックスがあり、下にある移動のボタンを押すとチェックボックスの選択によってページが変わるようにしたいです。
スクリーンショット 2022-10-03 11.08.09.png

自分で試したこと

jsで window.open を使って試してみましたができませんでした。

HTML

<form name="form1">
<label><input type="checkbox" value="SoftBank" class="check" name="softbank"><span>SoftBank</span></label>
<label><input type="checkbox" value="docomo" class="check" name="docomo"><span>docomo</span></label>
<label><input type="checkbox" value="au" class="check" name="au"><span>au</span></label>

<input type="button" value="移動" onClick="link()">
</form>

js

 <script>
        function link() {
               if ( document.form1.softbank[0].checked == true && document.form1.softbank[0].checked == true )
                 window.open("softbank.html")
            }
        function link() {
               if ( document.form1.docomo[0].checked == true && document.form1.docomo[0].checked == true )
                 window.open("docomo.html")
            }
        function link() {
               if ( document.form1.au[0].checked == true && document.form1.au[0].checked == true )
                 window.open("dcomo.html")
            }
    </script>
0

1Answer

g-iki
@g-iki

以下2点修正するととりあえず動きます。

① link()を上書きしてしまっている

同じ名前でlink()という処理を宣言しているため、質問文掲載のjsの場合、
auの条件のlink()という処理だけが動くような状態となっています。

②プロパティの取得の仕方がおかしい

html側でチェックボックスそれぞれにsoftbankやdocomo, auのように名前をつけているため、
document.form1.au[0].checkedの箇所でプロパティを取得できずに、エラーとなっています。
(エラーが発生しているかどうかはブラウザでF12を押して開発者ツールを開いてConsoleの箇所で確認してみてください)

それを踏まえて

function link() {
  if (document.form1.softbank.checked === true) {
    window.open("https://www.softbank.jp/");
  }
  if (document.form1.docomo.checked === true) {
    window.open("https://www.docomo.ne.jp/");
  }
  if (document.form1.au.checked === true) {
    window.open("https://www.au.com/");
  }
}

※チェックボックスなので、複数選択可能(複数選択された場合はそれぞれのページが開く)ものとして書いています。(どれか一つ開けばいいのであれば、else でつなげますが、動き的におかしいのでチェックされたものが全て開くようにしています。)

また、複数ページを開く場合、ブラウザのアドレスバーに「ポップアップのブロック」が表示されるので、それを許可する必要があります。
image.png

もし、選択が単一である場合は<input type="checkbox">でなく、<input type="radio">を使うほうがいいと思います。(チェックボックスの場合でも実装はできますが、単一の選択しかできないような制御を入れる必要があります。)

備考

html側でinputの名前を全て同じ名前でcareerとする場合は
document.form1.career[0].checkedのようにプロパティを取ることができます。

<form name="form1">
<label>
  <input type="checkbox" value="SoftBank" class="check" name="career"><span>SoftBank</span></label>
<label>
  <input type="checkbox" value="docomo" class="check" name="career"><span>docomo</span>
</label>
<label>
  <input type="checkbox" value="au" class="check" name="career"><span>au</span>
</label>

<input type="button" value="移動" onClick="link()">
</form>

function link() {
  if (document.form1.career[0].checked === true) {
    window.open("https://www.softbank.jp/");
  }
  if (document.form1.career[1].checked === true) {
    window.open("https://www.docomo.ne.jp/");
  }
  if (document.form1.career[2].checked === true) {
    window.open("https://www.au.com/");
  }
}

2Like

Comments

  1. @ikon0518

    Questioner

    回答ありがとうございます！
    チェックボックスは１つのみの選択できるよう設定していたのでうまくいきました！

    もう一つ質問したいのですが、現状だと新しいタブで開くようになっていますが、同じタブで開きたい場合だとどのように変更すべきでしょうか？

  3. @ikon0518

    Questioner

    詳しく教えていただきありがとうございます！！
    上手くいきました🙇‍♂️

Your answer might help someone💌

LoginSign Up