맞춤 체크 박스 만들기

-2

저는 CSS와 jquery를 사용하여 기본적인 맞춤 체크 박스를 만들려고합니다. 이 코드는 다음과 같습니다.맞춤 체크 박스 만들기

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script> 

    <style> 

     input[type="checkbox"]{ 
     /*display:none;*/ 
     } 
     .label .checkbox{ 
     width:25px; 
     height:25px; 
     background-color:rgba(0,0,0,0.6); 
     border-radius:15px; 
     -moz-border-radius: 15px; 
     -webkit-border-radius: 15px; 
     position:absolute; 
     z-index:1000; 
     padding:2px 3px 0 0; 
     } 
     .label .checkbox .circle{ 
     display:none; 
     background-color:#af213c; 
     line-height:25px; 
     text-align:center; 
     z-index:0; 
     border-radius:600px; 
     -moz-border-radius:600px; 
     -webkit-border-radius:600px; 
     height:23px; 
     width:23px; 
     } 
     .label{ 
     padding-right:34px; 
     line-height: 30px; 
     font-family: "b yekan"; 
     } 
     .label:hover{ 
     text-decoration:underline; 
     } 
     .labelcheck{ 
     color:#af213c; 
     } 
     .labelcheck .checkbox .circle{ 
     display:block; 
     } 
     .labelcheck .checkbox{ 
     z-index:0; 
     } 


    </style> 
    </head> 
    <body> 
       <label id="new" for="remember">remember me:</label> 
       <input type="checkbox" name="data[remember]" id="remember"  value="1">   

       <script> 
       $('input[type="checkbox"][id="remember"]').prev('label').append("<div class='checkbox'><div class='circle'></div></div>"); 
       $('input[type="checkbox"][id="remember"]').prev('label').addClass('label'); 
       var $chbx = $('input[type="checkbox"][id="remember"]') 
       $chbx.onchange=function() { 
       var label = $('label[for="'+$(this).attr('id')+'"]'); 
        if(this.checked=true) { 
         label.addClass('labelcheck'); 
        } 
        else if (this.checked=false){ 
         label.addClass('label'); 
        } 
       }; 


      </script> 
    </body> 
    </html>

복사하여보십시오. 나는 체크 박스의 각 상태를 스타일링 할 수 있도록 라벨의 클래스를 변경하고 싶다. 그래서 나는 라벨 클래스를 체크 박스 상태와 연관시키기 위해 onchange를 사용했다. 레이블의 클래스는 변경되지 않습니다. 그러나 다른 문제가있을 수 있지만, 나는 그것을 깨닫지 못합니다. 이 같은

출처

2013-08-28 Hossein Alimadad

당신이 (www.jsfiddle.net) – tymeJV

'경우 (this.checked = TRUE) {''해야하는 경우 (this.checked === 사실) {바이올린을 만들 수 working jsFiddle here보기 'else if (this.checked = false) {'를'else {'로 변경하십시오. –

... http://jshint.com과 같은 도구를 사용하여 간단하고 일반적인 실수를 찾습니다. 이것은 묻기 전에 일어나는 기본적인 디버깅의 일부입니다. –

:하지의 jQuery OBJ에 대한 3

this

을 사용 $(this)을 닫는 세미콜론 라인을 누락

평등성 테스트가 잘못되었습니다 (== 만 해당하지 않음)
if(this.checked=true) 내가 최근 과거에 자신을했습니다 if ($(this).prop('checked')==true)

모든 실수를해야한다.

는

$('input[type="checkbox"][id="remember"]').prev('label').append("<div class='checkbox'><div class='circle'></div></div>"); 
$('input[type="checkbox"][id="remember"]').prev('label').addClass('label'); 
var $chbx = $('input[type="checkbox"][id="remember"]'); //missing closing semicolon 
//alert($chbx.attr('id')); 

$chbx.change(function() { //fixed formatting/syntax 
    var label = $('label[for="' +$(this).attr('id')+ '"]'); 
    alert('CB property: ' + $(this).prop('checked')); 
    if ($(this).prop('checked')==true) { 
     label.addClass('labelcheck').removeClass('label'); 
     alert('Label class changed to: [' + label.attr('class') + ']'); 
    } else if ($(this).prop('checked')==false){ 
     label.removeClass('labelcheck').addClass('label'); 
     alert('Label class changed to: [' + label.attr('class') + ']'); 
} 
});

출처

2013-08-28 17:18:23 gibberish

Woa !!! 그것은 완전한 대답입니다. 큰 감사합니다 –

당신을 환영합니다; 나는 그것이 당신이 필요로하는 것을 희망한다. 문제가 끝나면 만족할 때 정답을 선택하는 것을 잊지 마십시오. – gibberish

만들기 체크 박스 기능,

몇 JQuery와 잘못된 일이 있었다

   $chbx.click(function() { 
       var label = $('label[for="'+$(this).attr('id')+'"]'); 
       if(this.checked) { 

        label.removeClass('label'); 
        label.addClass('labelcheck'); 
       } 
       else{ 
        label.removeClass('labelcheck'); 
        label.addClass('label'); 
       } 
      });

출처

2013-08-28 17:01:04

당신 말이 맞아요. 어쨌든 고마워요 –

맞춤 체크 박스 만들기

답변

관련 문제