Checkbox의 상위 요소 CSS 변경 확인 또는 확인되지 않은 경우 변경

StackOverflow https://stackoverflow.com/questions/1808198

문제

기본적으로 TD 요소 내부에 확인란이 있고 확인란을 확인할 때 배경색이 하나 있고 확인란이 확인되지 않은 경우 배경색이 있습니다. 다시 말해서 나는 그것이 확인되었는지 여부를 강조하고 싶습니다.

여기에서와 같은 솔루션을 사용하려고했습니다. jQuery 토글 이벤트는 확인란 값을 엉망으로 만들고 있습니다

그러나 어떤 이유로 나는 그것을 작동시킬 수 없습니다.

    $(document).ready(function(){
    $("input:checkbox").change(function() {
        if($(this).attr("checked") === "true") {
            // CHECKED, TO WHITE
            $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"});
            return;
        }
        //NOT CHECKED, TO GREEN
        $(this).parent().css({"background" : "#b4e3ac", "-moz-border-radius" : "5px"});
    });
});

녹색 배경색을 추가하지만 제거하지 않습니다. 확인란을 확인하고 새로 고침을 남기면 TD가 다시 흰색으로 돌아와서 한 번 확인란을 클릭하면 체크 상자를 선택 취소하면 TD의 배경을 녹색으로 변경합니다.

나는 아직도 이것에 익숙하지 않고 여기서 무엇이 잘못 될 수 있는지 전혀 모른다. 지금 몇 시간 동안 그것을 알아 내려고 노력하고있다. 그렇게 간단하지만 작동하지는 않습니다.

도움이 되었습니까?

해결책

변화

if($(this).attr("checked") === "true")

에게

if($(this).attr("checked") === true)

SNCE는 엄격한 사용을 비교하는 두 가지 데이터 유형이 동일해야합니다.

typeof ( $(this).attr ( "checked" ) )

그것이 있다는 것을 알려줄 것입니다 부울 입력하면 문자열과 비교하고 있습니다.

자세한 내용은 참조하십시오 비교 연산자

다른 팁

확인란이 확인되었는지 확인하는 더 좋은 방법이 있습니다.

$(this).is(':checked')

조금 더 강력합니다.

if ($ (this) .attr ( "Checked") === "true")

attr HTML 속성을 읽지 않습니다. 그런 식으로 기만적입니다. 속성을 읽은 경우 문자열 값 checked 할 것입니다 'checked' 그리고 아닙니다 'true'. 그러나 그것은 그렇게하지 않습니다.

실제로하는 일은 JavaScript 객체 속성을 읽는 것입니다. 몇 개의 장소에서 속성 이름 대신 속성 이름 만 사용합니다. 그만큼 checked 속성은 부울 가치를 제공하므로 어떤 것과 비교할 필요가 없습니다.

if ($(this).attr('checked'))

또는 더 간단하고 완전히 동일합니다.

if (this.checked)

최고의 것입니다

if($("this").is(':checked'))
 {
   $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"})
 }

이것을 확인하십시오 기사 JavaScript에서 =, ==와 === 사이의 차이. 또는 이것 JS의 평등 운영자.

이것을 바꾸십시오 :

$(this).attr("checked") === "true"

이에:

!!$(this).attr("checked") === true

이렇게하면 부울이 아닌 모든 것이 부울로 변환되며 문자열 "true"가 반환 된 경우에도 유형의 안전한 비교가 작동합니다 (문자열 false가 반환되면 true로 평가됩니다 ....).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top