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()