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

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

QA

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

답변 1

본문

개인정보 동의 체크박스를 만드는데, 

체크박스 디자인이 바뀌어야 해서 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;
    }

 

이걸 활용하시면 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 43
© SIRSOFT
현재 페이지 제일 처음으로