checkboxのオンオフで別URLのリンクに移動する方法

HTMLのcheckboxのオンオフをしたとき、それぞれオンオフに合わせて別URLのリンクに自動的に移動したいコトありますよね。

jquery使えば簡単なんですが、これくらいの処理だと普通にインライン？でinputタグ内に1行でさらっと書きたいですよね。そのやり方を。

やり方

<input type="checkbox" <?php echo($is_checked ? "checked" : ""); ?> onchange="location.href=checked?'https://google.com':'https://yahoo.co.jp';" />

これでオッケー。3項演算子を2か所使ってる形です。

変更しなくちゃいけない場所は3か所。

「https://google.com」「https://yahoo.co.jp」にこのチェックボックスのオンオフを変更したときに自動で移動したいURLを設定してくださいね。

で、一番難題、というか人によって環境が違うんで参考にしづらい部分だと思うんですが「$is_checked」の部分も変更が必要です。

この例だとphpでチェックボックスの初期状態を判断しています。イメージだとこのソースコードよりさらに前の処理で、URLに「?checked=on」みたいなのがついてたら「$is_checked」にtrueを設定する、みたいなphpを描く必要があります。

何かしらの方法でチェックボックスの初期値がオンの場合を設定できないと、毎回チェックボックスの値がオフから始まるんで、オンにしたときのURLにしか移動しないんで意味ないんですよね。

まとめ

HTMLのcheckboxのオンオフをしたとき、それぞれオンオフに合わせて別URLのリンクに自動的に移動する方法を紹介しました。

参考にしてみてくださいね。