체크드 활성화되면 인식하여 클래스 제이쿼리

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

감사합니다.

현재 클릭시에 토글클래스가 잘 들어가게되는데요,

수정시에는 체크드를 인식하지 못하고있습니다.

 

한번 체크를 풀었다가 다시 체크를 하면 클래스는 넣고 빠지고 잘 됩니다.

항상 감사드립니다~!

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    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에 배경을 입히려는 제 잘못된 생각에 한번더 질문을 드렸었는데

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

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

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요