checkbox和radio的样式美化问题
如果你下定決心要改變現(xiàn)有的默認(rèn)的checkbox和radio的樣式，那么我目前有兩種辦法：
1、自己動(dòng)手寫一個(gè)，也就是自己寫代碼實(shí)現(xiàn)將input的checkbox和radio默認(rèn)的樣式隱藏掉，使用絕對(duì)定位的方式，手動(dòng)切換checked和unchecked的圖片，定位到原來input顯示的地方；
2、使用jQuery的iCheck插件 。
? ? ?中文DOC地址：http://www.bootcss.com/p/icheck/
? ? ?github地址：https://github.com/fronteed/iCheck
?
一、先來說說第一種辦法吧，我覺得這個(gè)是最好的，又不用多添加js，自己寫幾行代碼就行了。
demo如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="grey.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="icheck.js"></script>
<style>
.checkbox-label {
position:relative;
display:block;
}
.hidebox {
opacity:0;
filter:alpha(opacity:0);
z-index:2;
position:relative;
}
.checkbox-label .checkbtn {
display:block;
width:12px;
height:12px;
left:5px;
top:-15px;
position:absolute;
background: url(checked.png) no-repeat;
}
.checkbox-label .uncheckbtn {
background: url(unchecked.png) no-repeat;
}
</style>
</head>
<body >
<div class="container">
<div class="header">
<h1>CheckBox And Radio Demo</h1>
</div>
<div>
<label class="checkbox-label">
<input type="checkbox" class="hidebox" checked/>復(fù)選框1號(hào)
<p class="checkbtn"></p>
</label>
<label class="checkbox-label">
<input type="checkbox" class="hidebox"/>復(fù)選框2號(hào)
<p class="checkbtn"></p>
</label>
<label class="checkbox-label">
<input type="checkbox" class="hidebox"/>復(fù)選框3號(hào)
<p class="checkbtn"></p>
</label>
</div>
</div>
<!-- /container -->
<script>
(function($){
$('input[type=checkbox]').on('click',function(){
var box = $(this),
mark = box.parent().find('.checkbtn');
$(this).prop('checked') ? mark.addClass('uncheckbtn') : mark.removeClass('uncheckbtn');
});
})(jQuery);
</script>
</body>
</html>
這里面有的說的我感覺就是attr()和prop()方法，以前我沒覺得有什么不同。但實(shí)際上還是有區(qū)別，簡(jiǎn)單來說吧，如果你想得到字符串的屬性值的話那么就要用attr(),但如果你的本意是獲得bool值得話，那么就要用prop()了。
?
二、那么如果你的項(xiàng)目比較大，兼容性封裝性等各個(gè)方面要求比較嚴(yán)格的話，那么你可以嘗試一下iCheck插件，但我目前還存在問題，如果你的checkbox和radio的功能比較簡(jiǎn)單的話，那么沒有任何問題，但是如果你有全選部分選擇的功能的話，那么你可能要花點(diǎn)心思了，我現(xiàn)在列出我的使用方法和心得，如果你有更好的解決其中問題的方法的話，請(qǐng)教教我喔，感激不盡。
簡(jiǎn)單使用真的簡(jiǎn)單，demo如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="grey.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="icheck.js"></script>
</head>
<body >
<div class="container">
<div class="header">
<h1>CheckBox And Radio Demo</h1>
</div>
<div>
?
<label class="checkbox-label">
<input type="checkbox" class="hidebox" id="box1" checked/>復(fù)選框1號(hào)
<p class="checkbtn"></p>
</label>
<label class="checkbox-label">
<input type="checkbox" class="hidebox" id="box2"/>復(fù)選框2號(hào)
<p class="checkbtn"></p>
</label>
<label class="checkbox-label">
<input type="checkbox" class="hidebox" id="box3"/>復(fù)選框3號(hào)
<p class="checkbtn"></p>
</label>
</div>
<div class="change">
<span class="toChecked">選中復(fù)選框1號(hào)和3號(hào)</span>
<span class="unChecked">取消選中復(fù)選框1號(hào)和3號(hào)</span>
<span class="toDisabled">disable復(fù)選框1號(hào)和3號(hào)單選框2號(hào)</span>
<span class="undisabled">取消disable復(fù)選框1號(hào)和3號(hào)單選框2號(hào)</span>
</div>
</div>
<!-- /container -->
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass:'icheckbox_flat-grey',
radioClass:'iradio_flat-grey',
increaseArea:'20%'
});
});
$('.toChecked').click(function(){
$('#box1,#box3').iCheck('check');
});
$('.unChecked').click(function(){
$('#box1,#box3').iCheck('uncheck');
});
$('.toDisabled').click(function(){
$('#box1,#box3,#rad2').iCheck('disable');
});
$('.undisabled').click(function(){
$('#box1,#box3,#rad2').iCheck('enable');
});
?
</script>
?
</body>
</html>
然后去下載iCheck.js和像grey.css（多種可選）這樣的樣式文件就可以了，簡(jiǎn)單的就可以換樣式了喔。
?
但是如果你想用到項(xiàng)目里，可能就沒這么簡(jiǎn)單了。我踩過的坑有：
? ? ? 1、雖然iCheck的實(shí)現(xiàn)原理是在input外包裹一層div用來實(shí)現(xiàn)樣式圖片的切換，跟我們手動(dòng)實(shí)現(xiàn)的原理差不多，但是雖然我們可能在瀏覽器中不容易顯示的看出來，實(shí)際上input的checked屬性也已經(jīng)切換了；
? ? ? 2、如果你的input部分是在js中動(dòng)態(tài)寫進(jìn)去的話，那么就要注意你有關(guān)iCheck的代碼的位置，一定要等到dom全部加載完成之后。iCheck才會(huì)起作用。
? ? ? 3、還有一個(gè)還沒有邁出來的坑，如果你的項(xiàng)目這個(gè)相關(guān)的功能需要完成，那么你可能需要在回調(diào)函數(shù)中完成一些操作，我的問題就在于，里面的操作實(shí)際上已經(jīng)完成了（控制臺(tái)可查看），但是我在其中調(diào)用的iCheck（）方法，卻不起作用了，看了很多github上的issue，相同問題很多。
like this：
$("#_hs_select_all").on('ifChecked',function(){$("._hs_item_cb").prop('checked',true).iCheck('check');$("._hs_item_cld_cb").prop('checked',true).iCheck('check');}).on('ifUnchecked',function(){$("._hs_item_cb").prop('checked',false).iCheck('uncheck');$("._hs_item_cld_cb").prop('checked',false).iCheck('uncheck');});
?
轉(zhuǎn)載于:https://www.cnblogs.com/axl234/p/3966723.html
總結(jié)
以上是生活随笔為你收集整理的checkbox和radio的样式美化问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
