選中多選框時改變相對應的包裹複選框的元素樣式
阿新 • • 發佈:2018-12-20
首先 有這樣的一個效果:
即選中複選框的時候,相對應的li將改變背景色等樣式,完整的實現效果主要程式碼如下
原始html檔案
<div class="check"> <h5>症狀(可多選)</h5> <ul class="flex"> <li class="radius"> 單顆牙缺失<input name="症狀" type="checkbox" value="單顆牙缺失" class="checkbox"></li> <li class="radius"> 多顆牙缺失<input name="症狀" type="checkbox" value="多顆牙缺失" class="checkbox"></li> <li class="radius"> 前牙缺失<input name="症狀" type="checkbox" value="前牙缺失" class="checkbox"></li> <li class="radius"> 後牙缺失<input name="症狀" type="checkbox" value="後牙缺失" class="checkbox"></li> <li class="radius"> 半口牙缺失<input name="症狀" type="checkbox" value="半口牙缺失" class="checkbox"></li> <li class="radius"> 全口牙缺失<input name="症狀" type="checkbox" value="全口牙缺失" class="checkbox"></li> </ul> </div>
js部分(主要)
$(".checkbox").click(function(){ if($(this).is(":checked")){ $(this).parent().addClass("on"); }else{ $(this).parent().removeClass("on"); } });
複選框樣式css部分
.check{width: 100%;position: relative;} .check h5{width: 50%; font-size: 2.2rem;position: relative;margin-bottom: 2%;color: #8d8c8c;} .check h5::after{display: block;content: '*';position: absolute;color: #ff0000;top:0;left: 50%;} .check ul{width: 100%;margin: 0 auto;} .check ul li{width: 42.76%;font-size: 2.6rem;color: #2a2a2a;text-align: center;padding: 2% 0;border: 2px solid #d2d2d2;margin-bottom: 4%;background: #fff;position: relative} .check ul li.on{background: #f85959;color: #fff;border-color: #f85959} .check input{-webkit-appearance:checkbox!important;}
以上來源於原始網頁:http://3g.hm-dental.com/zt/zzyxxl