自定義複選框，在Chrome和Safari瀏覽器

Question

我用下面的代碼自定義複選框不工作，

HTML

<div class="agree"> 
             <label for="agree_check" class="label_check"><input type="checkbox" class="agree_check" id="agree_check" />Agree</label> 
            </div> 

CSS

.has-js .label_check { padding-left: 34px; } 
.has-js .label_check { background: url(../images/box1.png) no-repeat; } 
.has-js label.c_on { background: url(../images/box1-with-mark.png) no-repeat; } 
.has-js .label_check input { position: absolute; left: -9999px; } 

腳本

<script type="text/javascript"> 
var d = document; 
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false; 
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); }; 
onload = function() { 

    var body = gebtn(d,'body')[0]; 
    body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js'; 

    if (!d.getElementById || !d.createTextNode) return; 
    var ls = gebtn(d,'label'); 
    for (var i = 0; i < ls.length; i++) { 
     var l = ls[i]; 
     if (l.className.indexOf('label_') == -1) continue; 
     var inp = gebtn(l,'input')[0]; 
     if (l.className == 'label_check') { 
      l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off'; 
      l.onclick = check_it; 
     }; 
     if (l.className == 'label_radio') { 
      l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off'; 
      l.onclick = turn_radio; 
     }; 
    }; 
}; 
var check_it = function() { 
    var inp = gebtn(this,'input')[0]; 
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) { 
     this.className = 'label_check c_on'; 
     if (safari) inp.click(); 
    } else { 
     this.className = 'label_check c_off'; 
     if (safari) inp.click(); 
    }; 
}; 
var turn_radio = function() { 
    var inp = gebtn(this,'input')[0]; 
    if (this.className == 'label_radio r_off' || inp.checked) { 
     var ls = gebtn(this.parentNode,'label'); 
     for (var i = 0; i < ls.length; i++) { 
      var l = ls[i]; 
      if (l.className.indexOf('label_radio') == -1) continue; 
      l.className = 'label_radio r_off'; 
     }; 
     this.className = 'label_radio r_on'; 
     if (safari) inp.click(); 
    } else { 
     this.className = 'label_radio r_off'; 
     if (safari) inp.click(); 
    }; 
}; 
     </script> 

現在我需要檢查複選框是否被選中r不是..它在FF中工作，但不適用於Chrome和Safari瀏覽器。

if (jQuery('#agree_check').is(':checked')) { 
alert("checked"); 
} 
else 
{ 
alert("Not checked"); 
} 

當我檢查複選框時，它在FF中顯示「checked」..但在Chrome和safari中它顯示「未檢查」。

問題是什麼？

Answer 1

終於讓我找到答案了這一點，它只是檢查以另一種方式，以使該條件爲真，

if (jQuery('#agree_check').is(':checked') || (jQuery('div.agree label').hasClass('c_on'))) { 
alert("checked"); 
} 
else 
{ 
alert("Not checked"); 
} 

現在它的正常工作在所有瀏覽器。

感謝， Ravichandran

Answer 2

我的解決方案，在服務器端也工作 - 代碼隱藏（用於標籤和複選框RUNAT =「server」屬性），包括對加選中/取消選中狀態至關重要的瀏覽器。也許這個工作適用於所有瀏覽器，清除if聲明。

var check_it = function() { 
    var inp = gebtn(this, 'input')[0]; 
    if (this.className == 'label_check c_off' || (!safari && inp.checked)) { 
     this.className = 'label_check c_on'; 
     if (chrome) inp.checked = true; 
     if (safari) inp.click(); 
    } else { 
     this.className = 'label_check c_off'; 
     if (chrome) inp.checked = false; 
     if (safari) inp.click(); 
    }; 
};