JSを読み込みます
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/formcheck.js"></script>
[formcheck.js]JavaScript
$(function(){
//チェックを外す
$(".mod_form001 p.check input:checkbox").attr('checked',false);
//
$(".mod_form001 p.btn input").click(function(){
if($(".mod_form001 p.check input:checkbox").prop('checked')==true){
location.href = 'https://codingmania.net/';
}else{
$(".mod_form001 p.error").css("display","block");
}
})
});
HTMl
<div class="mod_form001">
<p class="error">同意できない場合は、<br />
ここにエラーメッセージ表示。</p>
<form action="javascript:void(0)">
<p class="check"><input type="checkbox" name="check" id="check" value="同意する" /> <label for="check">同意する</label></p>
<p class="btn"><input type="image" src="img/button.gif" alt="送信する" onmouseover="this.src='img/button_on.gif'" onmouseout="this.src='img/button.gif'" /></p>
</form>
<!--mod_form001_end--></div>
CSS
/* 注意書きスタイル設定 */
.mod_form001 p.error{
display:none;
font-weight:bold;
color:#C00;
}
/* フォーム枠 */
.mod_form001{
width:262px;
padding:10px;
text-align:center;
border:solid 1px #CCC;
}