前言

checkbox和radio樣式自定義在網(wǎng)頁中是很常見的， 比如在進(jìn)行表單輸入時(shí)性別的選擇，用戶注冊(cè)時(shí)選擇已閱讀用戶協(xié)議。隨著用戶對(duì)產(chǎn)品體驗(yàn)要求越來越高，我們都會(huì)對(duì)checkbox和radio重新設(shè)計(jì)，checkbox默認(rèn)的樣式非常丑 ，無法直接修改checkbox和radio的樣式，這里我們借助label標(biāo)簽來對(duì)它進(jìn)行樣式美化。

先看實(shí)現(xiàn)效果圖，如下：

實(shí)現(xiàn)思路

1.設(shè)置input 屬性hidden對(duì)該input進(jìn)行隱藏，或者通過display:none也可以

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>

2.借助label for標(biāo)簽通過id綁定input ，這樣在點(diǎn)擊label時(shí)實(shí)際就是點(diǎn)擊了input

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
                <label for="adviceRadio1" class="advice"></label>

3.定義label的樣式，設(shè)置未選中狀態(tài)的背景圖

.advice{
                    height: 12px;
                    width: 12px;
                    display: inline-block;
                    background-image: url('https://caiyunupload.b0./newweb/imgs/icon-unchecked.png');
                    background-repeat: no-repeat;
                    background-position: center;
                    vertical-align: middle;
                    margin-top: -4px;
                }

4.使用相鄰選擇器設(shè)置選中狀態(tài)label的樣式

input[type="radio"]:checked + .advice{
                    background-image: url('https://caiyunupload.b0./newweb/imgs/icon-checked.png');
                }

實(shí)現(xiàn)代碼

請(qǐng)選擇反饋的問題：
            <label>
                <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
                <label for="adviceRadio1" class="advice"></label>
                <span class="radio-name">問題</span>
            </label>
            <label>
                <input type="radio" name="type" id="adviceRadio2" value="2" hidden/>
                <label for="adviceRadio2" class="advice"></label>
                <span class="radio-name">建議</span>
            </label>
            <span id="result">1</span>
            <style type="text/css">
                .advice{
                    height: 12px;
                    width: 12px;
                    display: inline-block;
                    background-image: url('https://caiyunupload.b0./newweb/imgs/icon-unchecked.png');
                    background-repeat: no-repeat;
                    background-position: center;
                    vertical-align: middle;
                    margin-top: -4px;
                }
                input[type="radio"]:checked + .advice{
                    background-image: url('https://caiyunupload.b0./newweb/imgs/icon-checked.png');
                }
            </style>

以上是radio單選框的實(shí)現(xiàn)代碼，checkbox也是類似 將input type定義成checkbox即可

獲取radio及checkbox選中的值

1.獲取radio的值
使用jquery獲取radio的值有3種方式：

$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

2.獲取checkbox的值

 var obj = document.getElementsByName("hobby");
                 var check_val = [];
                 for(k in obj){
                    if(obj[k].checked){
                        check_val.push(obj[k].value);
                    }
                 }

遇到的坑

一開始寫的時(shí)候，我是使用偽元素的方式實(shí)現(xiàn)，先將input進(jìn)行隱藏 ，然后設(shè)置input:after定義它的樣式,代碼如下：

//html
<input type="radio" name="sex" id="male" /><label for="male"> Male</label>

//css
input[type=radio]{
            visibility: hidden;
        }
        input[type=radio]:checked::after{
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -59px -10px;
            visibility: visible;
        }
        input[type=radio]::after{
            content: ' ';
            display: block;
            height: 20px;
            width: 20px;
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -24px -10px;
            visibility: visible;
        }

但是后來發(fā)現(xiàn)這種方式兼容性有問題，在firefox瀏覽器無法顯示，經(jīng)查資料是因?yàn)閕nput不支持偽元素:after,:before 。
火狐瀏覽器無法插入內(nèi)容DOM元素，偽元素都是在容器內(nèi)進(jìn)行渲染的。input無法容納其他元素，因此它不支持偽元素。
input，img，iframe等元素都不能包含其他元素，所以不能通過偽元素插入內(nèi)容。至于Chrome 中checkbox和radio可以插入應(yīng)該就是bug了
input要配合其它容器元素（i,span）等實(shí)現(xiàn)預(yù)期效果