技術標籤：html多選框js input複選框選中父級同時子級也選中js 中 實現複選框全選 子複選框案例判斷一組多選框至少有一個被選中前端 兩個複選框當只少選中一個

今天和大家分享一個不使用圖片美化複選框的方式。來看下效果圖吧，如下是3種不同狀態下的效果：

一. Html結構

<divclass="check-wrap">
<inputtype="checkbox"class="icheck"id="icheck"/>
<labelfor="icheck"class="ilabel">label>
 
div>

注：label 標籤的 for 屬性值必須指定為 input 的 id 名稱。

二. CSS 程式碼

/*定義複選框的大小*/
.check-wrap{
position:relative;
height:24px;
width:24px;
}

/*將原生checkbox設定成完全透明*/
.icheck{
opacity:0;
}

/*絕對定位遮蓋住checkbox*/
.ilabel{
border-radius:3px;
cursor:pointer;
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/*利用偽元素來實現選中和未選中狀態*/
 
.ilabel::after{
content:"";
border:2pxsolid#DDD;
display:block;
font-weight:bold;
text-align:center;
border-radius:3px;
width:20px;
height:20px;
}
.icheck:checked+.ilabel:after{
content:"✓";
border-color:#3f51b5;
background-color:#3f51b5;
color:#fff;
}
.icheck:indeterminate+.ilabel:after{
content:"■";
 
color:#3f51b5;
background-color:#FFF;
border-color:#3f51b5;
}

1. 將原有的 checkbox 標籤透明度設為0；

2. label:after 的寬高設定 20px 是因為 border 佔據了4px；

3. checkbox 的 indeterminate 狀態大家用的可能比較少(效果圖中的第2個狀態)，只能通過 js 進行設定，這種情況通常用在樹型結構或多選表格中，表示部分選中。