안녕하세요~^^

KBoard 입력 필드를 사용해서 체크박스 필드를 새로 만들고 체크된 값을 저장해서

수정 시에 값이 있으면 체크하는 방식으로 하셔야 할 듯합니다.

아래와 같은 코드를 적용해보시겠어요?

<input type="checkbox" value="1" name="kboard_option_my_checkbox"<?php if($content->option->my_checkbox == '1'):?> checked<?php endif?> 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>

고맙습니다.

감사합니다 ^^

값이 너무 잘들어갑니다.

<script>
jQuery(document).ready(function(){
	my_checkbox_class(jQuery('.my_checkbox'));
});
function my_checkbox_class(input){
	if(jQuery(input).prop('checked') == true){
		jQuery('.addcheck').addClass('toggleclass');
	}
	else{
		jQuery('.addcheck').removeClass('toggleclass');
	}
}
</script>

input이었던 값을 .addcheck로 덮어씌워서 이미지에 클래스를 주고 그위에 백그라운드를 줘서 추가되었다는 표시를 하려고합니다.

현재는 .addcheck로 주게되면 체크했을때 모든 이미지에 적용이 되고있습니다.

위에 label이나 li에 backgorund를 주어도 상관이 없습니다.

현재 html코드입니다.

<li><label for="edge_1"><input class="my_checkbox"  onchange="my_checkbox_class(this)"  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" class="addcheck" ><p class="color_name">WLP002</p><p class="color_name">WEG002</p><p class="color_name">망펄</p></label></li>
<li><label for="edge_2"> <input class="my_checkbox"  onchange="my_checkbox_class(this)"  id="edge_2" type="checkbox" name="kboard_option_type_color_echk2" value="1_2"<?php if($content->option->type_color_echk2 == '1_2'):?> checked<?php endif?>> <img src="/wp-content/uploads/colorsample/edge_2.jpg" class="addcheck" ><p class="color_name">WLP001</p><p class="color_name">WEG001</p><p class="color_name">메이플</p></label></li>

안녕하세요.

<script>
jQuery(document).ready(function(){
	jQuery('.my_checkbox').each(function(){
		my_checkbox_class(this);
	});
});
function my_checkbox_class(input){
	if(jQuery(input).prop('checked') == true){
		jQuery(input).parent('label').addClass('toggleclass');
	}
	else{
		jQuery(input).parent('label').removeClass('toggleclass');
	}
}
</script>

이렇게 해보시면 어떨까요?

부모 label 태그에 클래스를 추가할 수 있습니다.

감사합니다 너무 잘 작동합니다.

label이 아닌

li나 img에 적용하려면 parent대신 어떤 함수를 사용하면 좋을까요?

아래처럼 해주세요~

jQuery(input).parent('li')

<script>
jQuery(document).ready(function(){
	jQuery('.my_checkbox').each(function(){
		my_checkbox_class(this);
	});
});
function my_checkbox_class(input){
	if(jQuery(input).prop('checked') == true){
		jQuery(input).parent('li').addClass('toggleclass');
	}
	else{
		jQuery(input).parent('li').removeClass('toggleclass');
	}
}
</script>

이렇게 해보았는데 li에 클래스가 생기지 않습니다..

제가 뭘 잘못한걸까요..?

안녕하세요.

아래의 코드처럼 해보시겠어요?

jQuery(input).parents('li')

아래의 링크도 참고해보세요.

https://webisfree.com/2015-09-11/[제이쿼리]-부모요소-선택하는-방법-parent()-parents()-closest()

고맙습니다.

감사합니다 ^^

li에 클래스 추가,삭제는 너무 잘됩니다!

li에 배경을 입히려는 제 잘못된 생각에 한번더 질문을 드렸었는데

형제요소 함수를 찾아 해결하였습니다.

항상 감사드립니다 ^^~!!!