checkbox和radio的樣式美化問題

時間 2019-11-18

標籤 checkbox radio 樣式美化問題欄目 HTML 简体版

原文原文鏈接

若是你下定決心要改變現有的默認的checkbox和radio的樣式，那麼我目前有兩種辦法：javascript

一、本身動手寫一個，也就是本身寫代碼實現將input的checkbox和radio默認的樣式隱藏掉，使用絕對定位的方式，手動切換checked和unchecked的圖片，定位到原來input顯示的地方；css

二、使用jQuery的iCheck插件。html

中文DOC地址：http://www.bootcss.com/p/icheck/java

github地址：https://github.com/fronteed/iCheckjquery

1、先來講說第一種辦法吧，我以爲這個是最好的，又不用多添加js，本身寫幾行代碼就好了。git

demo以下：github

<!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>

<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>dom

這裏面有的說的我感受就是attr()和prop()方法，之前我沒以爲有什麼不一樣。但實際上仍是有區別，簡單來講吧，若是你想獲得字符串的屬性值的話那麼就要用attr(),但若是你的本意是得到bool值得話，那麼就要用prop()了。ide

2、那麼若是你的項目比較大，兼容性封裝性等各個方面要求比較嚴格的話，那麼你能夠嘗試一下iCheck插件，但我目前還存在問題，若是你的checkbox和radio的功能比較簡單的話，那麼沒有任何問題，可是若是你有全選部分選擇的功能的話，那麼你可能要花點心思了，我如今列出個人使用方法和心得，若是你有更好的解決其中問題的方法的話，請教教我喔，感激涕零。

簡單使用真的簡單，demo以下：

<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>

<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（多種可選）這樣的樣式文件就能夠了，簡單的就能夠換樣式了喔。

可是若是你想用到項目裏，可能就沒這麼簡單了。我踩過的坑有：

一、雖然iCheck的實現原理是在input外包裹一層div用來實現樣式圖片的切換，跟咱們手動實現的原理差很少，可是雖然咱們可能在瀏覽器中不容易顯示的看出來，實際上input的checked屬性也已經切換了；

二、若是你的input部分是在js中動態寫進去的話，那麼就要注意你有關iCheck的代碼的位置，必定要等到dom所有加載完成以後。iCheck纔會起做用。

三、還有一個尚未邁出來的坑，若是你的項目這個相關的功能須要完成，那麼你可能須要在回調函數中完成一些操做，個人問題就在於，裏面的操做實際上已經完成了（控制檯可查看），可是我在其中調用的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');         });