樣式複選框以強大的插件

這是目前位於http://www.fb-navigatio.com/markersparebank2/複選框自定義樣式。

我創建的風格複選框：

.frm_checkbox label input{ 
    display:none; 
} 
.frm_checkbox label { 
    background: url("images/check_sprite.png") no-repeat scroll 0 0; 
    padding: 4px 0 8px 42px; 
    position:relative; 
    z-index:100; 
    cursor:pointer; 
} 
.frm_checkbox label:hover { 
    background: url("images/check_sprite.png") no-repeat scroll 0 -40px; 
} 
.frm_checkbox label.checked{ 
    background: url("images/check_sprite.png") no-repeat scroll 0 -80px;  
}

這裏是JS代碼：

jQuery(document).ready(function($){ 
    var tmp = []; 
    $('input:checkbox').each(function(index){ 
     tmp[index] = ''; 
    }) 
    $('.frm_checkbox label').click(function(index){ 

     if(tmp[index] == ''){ 
      $(this).addClass('checked'); 
      $(this).find('input:checkbox').addAttr('checked'); 
      console.log(tmp[index]); 
     }else if(tmp[index] =='1') { 
      tmp[index] = '0'; 
      $(this).removeClass('checked'); 
      $(this).find('input').removeAttr('checked'); 
      console.log(tmp[index]); 
     } 
     //var $checkbox = $(this).find(':checkbox'); 
     //$checkbox.attr('checked', !$checkbox.is(':checked')); 
     //alert(); 
    }); 
});

的問題是，該複選框不起作用。點擊複選框似乎沒有檢查它。

來源

2014-01-13 FDI

太好了，你已經完成了這方面的工作。問題是什麼？ – Zhihao

它不起作用，請檢查鏈接 fb-navigatio.com/markersparebank2/ – FDI

下面是我看到了蝙蝠的一些潛在問題：

的jQuery不具備的功能addAttr和removeAttr。您應該使用prop('checked', true)和prop('checked', false)，如本問題所述： Setting "checked" for a checkbox with jQuery? jQuery的文檔可以找到on its website。
您正在使用複選框中的索引設置tmp的初始值，然後嘗試將這些索引用於標籤。這有點危險。我會建議數據屬性附加到元素本身：$checkbox.data('checkedState', false)
你的if-else語句檢查的tmp值是否等於''或'1'。但是，您也有'0'，您在取消選中時設置。由於您從不檢查'0'，這意味着在取消選中後，您將永遠無法檢查複選框。您可以只有兩個值，而不是第三個默認值''

讓我知道這些建議是否能解決您的問題。如果沒有，請設置一個jsFiddle，以便其他人可以自行嘗試，調試和修改代碼。

來源

2014-01-13 18:31:13 Zhihao

謝謝，它的工作原理！ – FDI

樣式複選框以強大的插件

回答

相關問題