input label 체크박스 필수 설정하는법

input label 체크박스 필수 설정하는법

QA

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;
    }

 

이걸 활용하시면 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 43
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT