效果圖:
```
input[name=sum] {
visibility: hidden
}
/*lable標簽的大小、位置、背景顏色更改,在css選擇時,“+”代表相鄰元素,即當前元素的下一元素*/
#color-input-checkbox+label {
display: block;
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
top: 3px;
left: 120px;
border: 1px solid #d2d2d2;
/* border-radius: 50%; */
background: white;
}
/*當input框為選中狀態時,lable標簽的樣式,其中在css選擇時,“:”表示當前input框的值,即checked;
該部分主要對顯示的“對號”的大限居中方式,顯示顏色進行了設置*/
#color-input-checkbox:checked+label::before {
display: block;
width: 16px;
height: 16px;
content: "\2714";
text-align: center;
font-size: 16px;
color: #5FB878;
margin-top: -3px;
}
```
```
<div class="layui-form" style="position:absolute;left:350px;top:6px;z-index: 9999999;">
<div class="layui-form-item">
<input type="text" name="" placeholder="" maxlength="32" id="government-index-workcheck-refresh" autocomplete="off"
style="width:45px;display:inline-block;border: 1px solid #d2d2d2;"><span>秒自動刷新</span>
<input id="color-input-checkbox" type="checkbox" name="sum" lay-filter="bid-pipeline-scan-scans" >
<label for="color-input-checkbox"></label>
</div>
</div>
```
```
//刷新
//1.點擊復選框,判斷輸入框里是否有值,若有值才點擊復選框打開定時器
//2.在輸入框輸入值完成之后,定時器間隔時間根據輸入框的值進行隔斷刷新
//3.前兩個條件都滿足才進行定時刷新
var sums = $("input[name='sum']");
var refresh = $("#government-index-workcheck-refresh")
var timer;
sums.on('click', function () {
var times = refresh.val()*1000;
if (sums.is(':checked') == true&&refresh.val()!=""&&refresh.val()!=0) {
timer = setInterval(function () {
town.render();
org.render();
bid.render();
}, times);
} else {
clearInterval(timer);
}
})
refresh.on('change', function () {
clearInterval(timer);
var times = refresh.val()*1000;
if (sums.is(':checked') == true&&refresh.val()!=''&&refresh.val()!=0) {
timer = setInterval(function () {
town.render();
org.render();
bid.render();
}, times);
}
})
```