2
2

More than 5 years have passed since last update.

チェックボックスにチェックが無ければリンク先へ移動させない

Last updated at Posted at 2017-04-28

Wordpressで「規約に同意しますか」のチェックボックスにチェックが
入っているか確認し、チェックが無いときは、リンク先に飛ばないように
したかった。
参考になるサイトがあったが、
同意チェックボックスはひとつ、遷移先は複数にしたい - JavaScript 解決済 | 教えて!goo
至れり尽くせりで、コピペしたあと、いらないところを削って
使うことはできたが、処理内容の理解がしたかったことと、
もっとシンプルに作りたくて、作ってみた。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  <title>規約承認</title>
</head>
<body>
  <form name="form1" action="">
    <input id="Checkbox1" type="checkbox" />承諾します
  </form><br>
  <a id="evtarget" href="http://example.jp">入力ページへ</a>
<script>
  //  id = 'evtarget' のタグにクリックイベントを設定
  var target = document.getElementById('evtarget');
  target.addEventListener('click', chk_value, false);

  function chk_value(event) {
    //  チェックボックスの値を取得
    var chkflg = document.form1.Checkbox1.checked;
    if (chkflg == false) {
      event.preventDefault();  //リンク先への移動をキャンセル
      alert('未承諾です');
    }
}
</script>
</body>
</html>

今回覚えたことは以下の3つ(jqueryを使わずにjavascriptのみでやってみた)

  • イベントの設定

 addEventListener('click', chk_value, false);
        パラメータ:イベントの種類,実行時の関数,false 

  • チェックボックスの値の取得

 document.form1.Checkbox1.checked;
     パラメータ:form name,チェックボックスのid,checked

  • リンク先に飛ばさない

  event.preventDefault()

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2