製作自定義複選框

-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 =真）{'應該是'如果（this.checked ===真）{ '然後改變'else if（this.checked = false）{'到'else {'。 –

...並使用像http://jshint.com這樣的工具來查找簡單的常見錯誤。這是詢問之前應該進行的基本調試的一部分。 –

有幾件事情錯了jQuery：

缺少右分號線3
使用$(this) jQuery的OBJ，不this
平等測試不正確（==不只是=）
if(this.checked=true)應該是if ($(this).prop('checked')==true)

我最近犯過的所有錯誤。

見working jsFiddle here

$('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

哇！這是一個非常完整的答案。非常感謝 –

不客氣，我希望它能夠滿足你的需求。請記住在滿意時選擇正確答案，以便結束問題。 – gibberish

製作複選框功能這樣，

   $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

你說得對。無論如何感謝 –

製作自定義複選框

回答

相關問題