自定义复选框在Chrome和Safari浏览器中无法使用 [英] Custom checkbox not working in Chrome and Safari browser
本文介绍了自定义复选框在Chrome和Safari浏览器中无法使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用下面的代码自定义复选框,
HTML
< div class =agree>
< label for =agree_checkclass =label_check>< input type =checkboxclass =agree_checkid =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)?真假;
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 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 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>
现在我需要检查复选框被选中或不是..它是在FF工作,但不工作在Chrome和Safari浏览器中。
if(jQuery('#agree_check')。is(':checked')){
alert(checked);
}
else
{
alert(Not checked);
}
当我选中复选框在FF ..
解决方案
最后,我找到了答案,这只是检查在另一种方式使条件为真,
if (jQuery('#agree_check')。is(':checked')||(jQuery('div.agree label')。hasClass('c_on'))){
alert(checked);
}
else
{
alert(Not checked);
}
现在可以在所有浏览器中正常工作。
感谢,
Ravichandran
i used below code for custom checkbox,
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
<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>
now i need to check the checkbox is checked or not.. it is works in FF but not works in Chrome and Safari browser.
if (jQuery('#agree_check').is(':checked')) {
alert("checked");
}
else
{
alert("Not checked");
}
when i checked the checkbox it displays "checked" in FF.. but in Chrome and safari it displays "not checked".
what is the issue?
解决方案
Finally i found answer for this, it is just check in another way to make that condition true,
if (jQuery('#agree_check').is(':checked') || (jQuery('div.agree label').hasClass('c_on'))) {
alert("checked");
}
else
{
alert("Not checked");
}
now it's works fine in all browsers.
Thanks, Ravichandran
这篇关于自定义复选框在Chrome和Safari浏览器中无法使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文