input label 체크박스 필수 설정하는법
본문
개인정보 동의 체크박스를 만드는데,
체크박스 디자인이 바뀌어야 해서 label로 체크박스 css를 주었습니다.
체크가 되지 않으면 다음으로 넘어갈 수 없게 해야하는데
다 체크해도 label 이미지만 바뀌어서 그런지 다음으로 넘어가지 않습니다..ㅠㅠ
스크립트를 어떻게 수정해야할까요?
<script>
function submitChk(frm)
{
if(!frm.wr_4.checked)
{
alert("개인정보 취급방침을 체크해주셔야 이벤트 상담이 가능합니다.");
return false();
}
frm.action = "/bbs/write_update.php";
frm.method = "post";
// frm.submit();
}
</script>
-----------------------------------------------------------------------------
<style>
.keep_login_container { position: relative; line-height: 18spx;}
.keep_login_container input[type=checkbox] { display: none;}
.keep_login_container input[type=checkbox] + label{ cursor: pointer; padding-left:25px;}
.keep_login_container input[type=checkbox] + label:before {
content: "";
width: 18px;
height: 18px;
margin-right: 10px;
position: absolute;
left: 0;
background-color: #fff;
border: 1px solid #cdcdcd;
}
.keep_login_container input[type=checkbox]:checked + label:before{
content: "\2714";
font-size: 16px;
line-height: 16px;
font-weight:600;
color: #54d3c2;
background:#fff;
text-align: center;
}
.personal_text { color: #a3a3a3; margin-top: 25px; padding-bottom: 25px; border-bottom: 1px solid #cdcdcd; display: none; }
.personal_text span { color: #000; ;}
.personal_text p { margin-top: 13px; line-height: 22px; }
.checkbox_toggle { float: right; color: #a3a3a3; cursor: pointer; margin-top:; }
.checkbox_toggle .cb_none { display: none; }
</style>
-----------------------------------------------------------------------------
<span>이용자 동의</span>
<ul class="checkbox_wrap">
<!--동의1-->
<li>
<div class="keep_login_container">
<input id="keep_login_checkbox" type="checkbox" name='wr_4' id="wr_4" value="동의">
<label for="keep_login_checkbox"> [필수] 개인정보 처리방침</label>
<p class="checkbox_toggle" id="checkbox_toggle1"><span class="cb_show">상세보기</span><span class="cb_none">닫기</span></p>
</div>
<div class="personal_text" id="personal_text1">
<span>개인정보 처리방침</span>
</div>
</li>
<!--동의2-->
<li>
<div class="keep_login_container">
<input id="keep_login_checkbox2" type="checkbox" name='wr_4' id="wr_4" value="동의">
<label for="keep_login_checkbox2"> [필수] 개인정보 수집/이용</label>
<p class="checkbox_toggle" id="checkbox_toggle2"><span class="cb_show">상세보기</span><span class="cb_none">닫기</span></p>
</div>
<div class="personal_text" id="personal_text2">
<span>개인정보 처리방침</span>
</div>
</li>
<!--동의3-->
<li>
<div class="keep_login_container">
<input id="keep_login_checkbox3" type="checkbox" name='wr_4' id="wr_4" value="동의">
<label for="keep_login_checkbox3"> [필수] 개인정보 처리위탁</label>
<p class="checkbox_toggle" id="checkbox_toggle3"><span class="cb_show">상세보기</span><span class="cb_none">닫기</span></p>
</div>
<div class="personal_text" id="personal_text3">
<span>개인정보 처리방침</span>
</div>
</li>
</ul><!--checkbox_wrap 닫음-->
답변 1
if ($("input:checkbox[id='keep_login_checkbox']").is(":checked") == false)
{
alert('개인정보 처리방침에 동의 하여주시기 바랍니다.');
$("#keep_login_checkbox").focus();
return false;
}
이걸 활용하시면 됩니다.
감사합니다!!
