checkbox和radio的样式美化问题
如果你下定決心要改變現(xiàn)有的默認的checkbox和radio的樣式，那么我目前有兩種辦法：
1、自己動手寫一個，也就是自己寫代碼實現(xiàn)將input的checkbox和radio默認的樣式隱藏掉，使用絕對定位的方式，手動切換checked和unchecked的圖片，定位到原來input顯示的地方；
2、使用jQuery的iCheck插件 。
? ? ?中文DOC地址：http://www.bootcss.com/p/icheck/
? ? ?github地址：https://github.com/fronteed/iCheck
?
一、先來說說第一種辦法吧，我覺得這個是最好的，又不用多添加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/>復選框1號
<p class="checkbtn"></p>
</label>
<label class="checkbox-label">
<input type="checkbox" class="hidebox"/>復選框2號
<p class="checkbtn"></p>
</label>
<label class="checkbox-label">
<input type="checkbox" class="hidebox"/>復選框3號
<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()方法，以前我沒覺得有什么不同。但實際上還是有區(qū)別，簡單來說吧，如果你想得到字符串的屬性值的話那么就要用attr(),但如果你的本意是獲得bool值得話，那么就要用prop()了。
?
二、那么如果你的項目比較大，兼容性封裝性等各個方面要求比較嚴格的話，那么你可以嘗試一下iCheck插件，但我目前還存在問題，如果你的checkbox和radio的功能比較簡單的話，那么沒有任何問題，但是如果你有全選部分選擇的功能的話，那么你可能要花點心思了，我現(xià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/>復選框1號
<p class="checkbtn"></p>
</label>
<label class="checkbox-label">
<input type="checkbox" class="hidebox" id="box2"/>復選框2號
<p class="checkbtn"></p>
</label>
<label class="checkbox-label">
<input type="checkbox" class="hidebox" id="box3"/>復選框3號
<p class="checkbtn"></p>
</label>
</div>
<div class="change">
<span class="toChecked">選中復選框1號和3號</span>
<span class="unChecked">取消選中復選框1號和3號</span>
<span class="toDisabled">disable復選框1號和3號單選框2號</span>
<span class="undisabled">取消disable復選框1號和3號單選框2號</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（多種可選）這樣的樣式文件就可以了，簡單的就可以換樣式了喔。
?
但是如果你想用到項目里，可能就沒這么簡單了。我踩過的坑有：
? ? ? 1、雖然iCheck的實現(xiàn)原理是在input外包裹一層div用來實現(xiàn)樣式圖片的切換，跟我們手動實現(xiàn)的原理差不多，但是雖然我們可能在瀏覽器中不容易顯示的看出來，實際上input的checked屬性也已經切換了；
? ? ? 2、如果你的input部分是在js中動態(tài)寫進去的話，那么就要注意你有關iCheck的代碼的位置，一定要等到dom全部加載完成之后。iCheck才會起作用。
? ? ? 3、還有一個還沒有邁出來的坑，如果你的項目這個相關的功能需要完成，那么你可能需要在回調函數中完成一些操作，我的問題就在于，里面的操作實際上已經完成了（控制臺可查看），但是我在其中調用的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');});
?
轉載于:https://www.cnblogs.com/axl234/p/3966723.html
總結
以上是生活随笔為你收集整理的checkbox和radio的样式美化问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nginx指令
- 下一篇： Linux学习笔记2-文件读写操作