時間選擇器插件地址 （基於jquery）提取碼: pibm
完整樣式圖
js 代碼可以參考,其他略過
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="theme-color" content="#3d3c53">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0">
<title>繳費</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/mobileSelect.css">
<link rel="stylesheet" href="../css/payCost.css">
<link rel="stylesheet" href="../css/iconfont.css">
<script>
/**
* YDUI 可伸縮佈局方案
* rem計算方式：設計圖尺寸px / 100 = 實際rem 【例: 100px = 1rem，32px = .32rem】
*/
!(function(window) {
/* 設計圖文檔寬度 */
var docWidth = 750
var doc = window.document,
docEl = doc.documentElement,
resizeEvt =
'orientationchange' in window ? 'orientationchange' : 'resize'
var recalc = (function refreshRem() {
var clientWidth = docEl.getBoundingClientRect().width
/* 8.55：小於320px不再縮小，11.2：大於420px不再放大 */
docEl.style.fontSize =
Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 +
'px'
return refreshRem
})()
/* 添加倍屏標識，安卓爲1 */
docEl.setAttribute(
'data-dpr',
window.navigator.appVersion.match(/iphone/gi)
? window.devicePixelRatio
: 1
)
if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
/* 添加IOS標識 */
doc.documentElement.classList.add('ios')
/* IOS8以上給html添加hairline樣式，以便特殊處理 */
if (
parseInt(
window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1],
10
) >= 8
)
doc.documentElement.classList.add('hairline')
}
if (!doc.addEventListener) return
window.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(window)
</script>
</head>
<body>
<div class="payCost-warp">
<div class="payCost-inner">
<div class="head-content">
<div class="left">
<div class="time">
<span>開始時間:</span>
<div class="picker" id="strat-time">2019-5</div>
</div>
<div class="time">
<span>結束時間:</span>
<div class="picker" id="end-time"></div>
</div>
</div>
<div class="right">
<div class="item">
<span>繳費率:</span>
<span>56%</span>
</div>
<div class="item">
<span>應繳:</span>
<span>300.00元</span>
</div>
<div class="item item1">
<span>已繳:</span>
<span>300.00元</span>
</div>
<div class="item item2">
<span>未繳:</span>
<span>300.00元</span>
</div>
</div>
</div>
<div class="record-bar">
<div class="ck">
<span class="checkbox-fang">
<input type="checkbox" id="onlyArrears">
<label for="onlyArrears"></label>
</span>
<span class="text">僅顯示欠費</span>
</div>
<a href="paymentRecords.html">
<i class="iconfont icon-jilu"></i><span class="text">繳費記錄</span>
</a>
</div>
<ul class="detail-container">
<li class="item no-sure-item">
<div class="father both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item1" onclick="checkRow(this,this.name)" name="item1">
<label for="item1"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">未確認</span>
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[已繳]200.00</span>
<span class="text text2">[未繳]20000.00</span>
</div>
</div>
<span class="show-detail" onclick="shouDetail(this)">顯示詳情</span>
</div>
<div class="child-cont">
<div class="child both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item1-1" name="item1" onclick="checkRow2(this,this.name)">
<label for="item1-1"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">未確認</span>
</div>
<div class="date-time">
2017-12-04至2017-12-05
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[已繳]200.00</span>
<span class="text text2">[未繳]20000.00</span>
</div>
</div>
</div>
<div class="child both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item1-2" name="item1" onclick="checkRow2(this,this.name)">
<label for="item1-2"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">未確認</span>
</div>
<div class="date-time">
2017-12-04至2017-12-05
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[已繳]200.00</span>
<span class="text text2">[未繳]20000.00</span>
</div>
</div>
</div>
</div>
</li>
<li class="item no-sure-item">
<div class="father both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item2" name="item2" onclick="checkRow(this,this.name)">
<label for="item2"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">未確認</span>
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[已繳]200.00</span>
<span class="text text2">[未繳]20000.00</span>
</div>
</div>
<span class="show-detail" onclick="shouDetail(this)">顯示詳情</span>
</div>
<div class="child-cont">
<div class="child both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item2-1" name="item2" onclick="checkRow2(this,this.name)">
<label for="item2-1"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">未確認</span>
</div>
<div class="date-time">
2017-12-04至2017-12-05
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[已繳]200.00</span>
<span class="text text2">[未繳]20000.00</span>
</div>
</div>
</div>
<div class="child both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item2-2" name="item2" onclick="checkRow2(this,this.name)">
<label for="item2-2"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">未確認</span>
</div>
<div class="date-time">
2017-12-04至2017-12-05
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[已繳]200.00</span>
<span class="text text2">[未繳]20000.00</span>
</div>
</div>
</div>
</div>
</li>
<li class="item sure-item">
<div class="father both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item3" name="item3" onclick="checkRow(this,this.name)">
<label for="item3"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">已繳清</span>
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[未繳]0</span>
<span class="text text2">[已繳]20000.00</span>
</div>
</div>
<span class="show-detail" onclick="shouDetail(this)">顯示詳情</span>
</div>
<div class="child-cont">
<div class="child both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item3-1" name="item3" onclick="checkRow2(this,this.name)">
<label for="item3-1"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">已繳清</span>
</div>
<div class="date-time">
2017-12-04至2017-12-05
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[未繳]0</span>
<span class="text text2">[已繳]20000.00</span>
</div>
</div>
</div>
<div class="child both">
<div class="check checkbox-yuan">
<input type="checkbox" id="item3-2" name="item3" onclick="checkRow2(this,this.name)">
<label for="item3-2"></label>
</div>
<div class="content">
<div class="tip1">
<span class="date">2017年01月</span>
<span class="status">未確認</span>
</div>
<div class="date-time">
2017-12-04至2017-12-05
</div>
<div class="tip2">
<span class="text text1">應繳款日: 2019-05-01</span>
<span class="text">[應繳]20000.00</span>
</div>
<div class="tip3">
<span class="text text1">[未繳]0</span>
<span class="text text2">[已繳]20000.00</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="payCost-footer">
<div class="total-cont">
<div class="check-inner">
<span class="checkbox checkbox-yuan">
<input type="checkbox" id="all-check" name="" onclick="queryAll(this)">
<label for="all-check"></label>
</span>
<label for="allcheck" class="text">全選</label>
</div>
<div class="tatal-inner">
<span class="text">合計:</span>
<span class="tatol">300元</span>
</div>
</div>
<button id="confirm">確認</button>
</div>
</div>
<script src="../js/lib/jquery-1.8.3.min.js"></script>
<script src="../js/lib/mobileSelect.js"></script>
<script src="../js/lib/selectDate.js"></script>
<script src="../js/lib/fastclick.js"></script>
<script src="../js/lib/layer.js"></script>
<script>
var year = new Date().getFullYear()
var month = new Date().getMonth()
// 自定義
// var year = '2018';
// var month ='05';
//默認當前時間
$('#strat-time').text(year + '-' + (month < 10 ? '0' + month : month))
$('#end-time').text(year + '-' + (month < 10 ? '0' + month : month))
// 開始日期
$.selectDate(
'#strat-time',
{
start: 1900,
end: 2030,
select: [year, month],
title: '請選擇日期'
},
function(data) {
console.log(data)
$('#strat-time').text(
// 補零
data.year + '-' + (data.month < 10 ? '0' + data.month : data.month)
)
}
)
// 結束日期
$.selectDate(
'#end-time',
{
start: 1900,
end: 2030,
select: [year, month],
title: '請選擇日期'
},
function(data) {
console.log(data)
$('#end-time').text(
data.year + '-' + (data.month < 10 ? '0' + data.month : data.month)
)
}
)
$('#confirm').click(function() {
// 沒有選擇未繳費直接返回
var choiceLength = $('.detail-container .no-sure-item').find(
'input:checked'
).length
if (choiceLength === 0) return
//詢問框
layer.open({
// shadeClose: false,
className: 'payCost-dialog',
title: '溫馨提示',
content: '是否確認賬單無誤',
btn: ['確認', '取消'],
yes: function(index) {
layer.close(index)
console.log(1)
window.location.href = 'confirmPayment.html'
}
})
})
// 僅顯示欠費
$('#onlyArrears').change(function() {
if ($(this).is(':checked') == true) {
$('.father .status').each(function(index, dom) {
if ($(dom).text() == '已繳清') {
$(dom)
.parent()
.parent()
.parent()
.parent()
.fadeOut()
}
})
} else {
$('.detail-container .item').fadeIn()
}
})
// 展示詳情
function shouDetail(dom) {
$(dom)
.parent()
.next()
.slideToggle(function() {
if ($(this).is(':visible')) {
// alert("顯示內容");
$(dom).text('收起詳情')
} else {
// alert("隱藏內容");
$(dom).text('顯示詳情')
}
})
}
//全選,取消
function queryAll(dom) {
if ($(dom).is(':checked') == true) {
$('.detail-container')
.find('input')
.prop('checked', true) //全選
} else {
$('.detail-container')
.find('input')
.prop('checked', false) //取消
}
}
document
.querySelector('.detail-container')
.addEventListener('click', function(e) {
// 選擇勾的情況
if ($('#onlyArrears').is(':checked') == true) {
// 如果勾了欠費
var choiceSelect = $('.detail-container .no-sure-item').find(
'input'
).length
var choiceLength = $('.detail-container .no-sure-item').find(
'input:checked'
).length
if (choiceSelect == choiceLength) {
//所有按鈕被選中,全選按鈕選中
$('#all-check').prop('checked', true)
}
} else {
var choiceSelect = $('.detail-container').find('input').length
var choiceLength = $('.detail-container').find('input:checked')
.length
if (choiceSelect == choiceLength) {
//所有按鈕被選中,全選按鈕選中
$('#all-check').prop('checked', true)
}
}
// 取消勾的情況
if (
e.target.tagName == 'INPUT' &&
$(e.target).is(':checked') == false
) {
//如果有一個取消,全選按鈕取消
$('#all-check').prop('checked', false)
}
})
// 模塊同行全選,取消
function checkRow(dom, name) {
if ($(dom).is(':checked') == true) {
console.log(
$(dom)
.parent()
.parent()
.next()
)
$(dom)
.parent()
.parent()
.next()
.find('input')
.prop('checked', true)
} else {
$(dom)
.parent()
.parent()
.next()
.find('input')
.prop('checked', false)
}
}
// 菜單同行全選,取消
function checkRow2(dom, name) {
var choiceSelect3 = $(dom)
.parent()
.parent()
.parent()
.find('input').length //該菜單下所有child長度
if ($(dom).is(':checked') == true) {
var choiceLength3 = $(dom)
.parent()
.parent()
.parent()
.find('input:checked').length //該菜單下選中的所有child長度
console.log(choiceSelect3, choiceLength3)
if (choiceSelect3 == choiceLength3) {
$(dom)
.parent()
.parent()
.parent()
.prev()
.find('input')
.prop('checked', true)
}
} else {
$('.right input[name =' + name + ']').prop('checked', false)
$(dom)
.parent()
.parent()
.parent()
.prev()
.find('input')
.prop('checked', false) //取消
}
}
</script>
</body>
</html>