체크 박스로 이미지 - 배경색

이미지에 대한이 링크를 따라갔습니다. 확인란체크 박스로 이미지 - 배경색

http://jsfiddle.net/jtbowden/xP2Ns/. 스크립트와 CSS는 완벽하게 작동했습니다.

내 문제는 사용자가 체크 박스를 클릭하면 background-color을 설정하기 위해 노력하고있다

.checkbox, .radio { 
    width: 19px; 
    height: 20px; 
    padding: 0px; 
    background: url("http://i48.tinypic.com/raz13m.jpg"); 
    display: block; 
    clear: left; 
    float: left; 
}

.green { 
    background-color: green; 
}

그리고 배경 색은 내가 예상처럼 보이는되지 않고 바이올린 O/P와 같은 찾고 있어요 .

Attached my o/p

어떻게이 문제를 해결 아니면 내가 뭔가를 그리워 할 수 있습니까? 내 HTML에서

은 내가

<p> 
    <input type="checkbox" name="1" class="styled green" />(green) 
<p>

을 제공하지만 여전히 그것은 전체에 걸쳐 적용된다. 무엇이 잘못되었는지 잘 모름!

출처

2013-05-21 user2067567

뭔가 : 여기

.greencheck { background-color: green; } function doCheck() { if ($(this).hasClass('checked')) { $(this).removeClass('checked'); if($(this).hasClass('green')){ $(this).removeClass('greencheck'); } $(this).children().prop("checked", false); } else { $(this).addClass('checked'); if($(this).hasClass('green')){ $(this).addClass('greencheck'); } $(this).children().prop("checked", true); }

이 작업 바이올린입니다 http://jsfiddle.net/xP2Ns/1241/가 (지금은 녹색에서만 작동) –

을 당신은 (예를 들어 녹색) 배경색을 알고 클래스를 사용할 수 있습니다 , DoCheck 함수에서 클래스를 확인하고 배경을 포함하는 새 클래스를 추가 할 수 있습니다 (예 : greenchecked).

다른 색상에도 동일한 방법을 사용할 수 있습니다.

예 : http://jsfiddle.net/xP2Ns/1241/이 같은

출처

2013-05-21 06:36:00

업데이트 내 질문. 기본 HTML 배경이 제대로 나오지 않습니다. 왜 그런 와트를 일으켰습니까? – user2067567

저에게 잘 작동합니다. 문제를 jsfiddle에 제공 할 수 있습니까? –

일부 캐시 문제가 해결되었습니다. 감사 ! – user2067567

span에 background-color을 설정해야합니다 (checkbox이 아님).

예를 들어, (.purple 용)과 같이 수행 할 수 있습니다

JQuery와

if($(this).hasClass("purple")){ 
    $(this).css("background-color", "green"); 
}

JSFiddle

출처

2013-05-21 06:28:02 Vucko

체크 박스로 이미지 - 배경색

답변

관련 문제