css , jquery 질문입니다.

조회수 1616회

jquery를 이용하여

html 상의

라벨 부분을

동적으로 바꾸고 싶은데요.

전체 동의를 클릭하였을때

html상의 모든 동의 사항의 css 수정하고 싶은데 어렵네요 ㅜ 선배님들의 도움이 필요합니다.

html 부분입니다.

<div class="list-agreement-block">
                <div class="agreement-all">
                    <input type="checkbox" name="" id="check7" value="" />
                    <label for="check7" class="check-label" onclick="agreeBtn(this);">전체동의</label>
                </div>

                <div class="padding-block text-12">
                     <p class="ph-indent">이용약관, 개인정보취급방침은 필수 동의 사항으로 원활한 서비스 이용을 위해서는 약관에 대한 동의가 필요 합니다.</p>
                </div>

                <ul>
                    <li>
                        <input type="checkbox" name="" id="check1" value="" />
                        <label for="check1" class="check-label text-12" >이용약관 동의</label>
                        <div class="abr">
                            <a href="#a" class="btn-text"><span class="blind">내용보기</span></a>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" name="" id="check2" value="" />
                        <label for="check2" class="check-label text-12">개인정보취급방침 동의</label>
                        <div class="abr">
                            <a href="#a" class="btn-text"><span class="blind">내용보기</span></a>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" name="" id="check3" value="" />
                        <label for="check3" class="check-label text-12">개인정보 수집 및 이용 동의</label>
                        <div class="abr">
                            <a href="#a" class="btn-text"><span class="blind">내용보기</span></a>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" name="" id="check4" value="" />
                        <label for="check4" class="check-label text-12">고유식별정보 수집 및 이용 동의</label>
                        <div class="abr">
                            <a href="#a" class="btn-text"><span class="blind">내용보기</span></a>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" name="" id="check5" value="" />
                        <label for="check5" class="check-label text-12">개인정보의 취급 위탁 동의</label>
                        <div class="abr">
                            <a href="#a" class="btn-text"><span class="blind">내용보기</span></a>
                        </div>
                    </li>
                    <li>
                        <input type="checkbox" name="" id="check6" value="" />
                        <label for="check6" class="check-label text-12">개인정보의 제3자 정보제공 동의</label>
                        <div class="abr">
                            <a href="#a" class="btn-text"><span class="blind">내용보기</span></a>
                        </div>
                    </li>
                </ul>

            </div><!--// list-agreement-block -->

css 입니다.


input[type="checkbox"] {display:none;}
input[type="checkbox"] + label {display:block;padding-left:2.5em;}
input[type="checkbox"] + label:before {content:"";display:inline-block;width:24px;height:24px;position:absolute;left:0;top:50%;margin-top:-11px;
    background:url(../images/ico_check_off.png) no-repeat 0 0;
}
input[type="checkbox"]:checked + label:before {background-image:url(../images/ico_check_on.png);}

  • 일단 동작은 해결하였습니다만 $(element).prop("checkec")에서 가져오는 게 왜 treu랑 false랑 반대로 콘솔에 찍히는지는 모르겠네요 ㅜ 김영광 2016.9.28 16:56

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)