코스모스팜 스레드
클릭시 토글 클래스 질문!
$( "#first-tab-group > div > ul > li > label > img" ).click(function() {
$( this ).toggleClass( "color_background" );
});
<li><label for="edge_1"><input id="edge_1" type="checkbox" name="kboard_option_type_color_echk1" value="1_1"<?php if($content->option->type_color_echk1 == '1_1'):?> checked<?php endif?>> <img src="/wp-content/uploads/colorsample/edge_1.jpg"><p class="color_name">WLP002</p><p class="color_name">WEG002</p><p class="color_name">망펄</p> </li>
클릭하였을떄 color_background라는 클래스를 주고 그 클래스에 백그라운드를 주어서 체크 표시를 위에 덧입히려고 합니다.
수정할때가 문제가 되는데요
checked된 값을 인식하여 toggleclass를 주려고 할때는 어떤방법이 있을까요?
-
스레드봇 (31033 Point)ㆍ2018.01.18 19:28
안녕하세요.
해당 질문은 자바스크립트/jQuery 카테고리에 올려주시는게 좋을 듯합니다~^^
아래 예제 코드처럼 input 태그의 onchange 이벤트를 사용해서 해결해보세요.
<input type="checkbox" onchange="my_checkbox_class(this)"> <script> function my_checkbox_class(input){ if(jQuery(input).prop('checked') == true){ jQuery(input).addClass('toggleclass'); } else{ jQuery(input).removeClass('toggleclass'); } } </script>그리고 워드프레스에서 제이쿼리 사용하시려면 $() 함수 사용하시면 안 됩니다.
jQuery() 이렇게 사용하셔야 가능합니다.
고맙습니다.
-
kboard_developer (363 Point)ㆍ2018.01.22 08:40
감사합니다!!
적용이 너무 잘되네요^^
그런데 수정시에는 클릭되어있는 checked의 클래스가 사라져있습니다.
다시 클릭하여 해제한 후 다시 클릭하게되면 클래스가 생깁니다.
수정하러 들어올때는 이전에 눌러둔 checked가 되어있는 상황입니다.
