JS 条件筛选，多条件并行互斥，checkbox筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
span {
display: inline-block;
text-align: center;
width: 100px
}
</style>
<body>
开始
<input type="checkbox" data-value='0-6' data-type='start'>0-6
<input type="checkbox" data-value='6-12' data-type='start'>6-12
<input type="checkbox" data-value='12-18' data-type='start'>12-18
<input type="checkbox" data-value='18-24' data-type='start'>18-24
<br /> 结束
<input type="checkbox" data-value='0-6' data-type='end'>0-6
<input type="checkbox" data-value='6-12' data-type='end'>6-12
<input type="checkbox" data-value='12-18' data-type='end'>12-18
<input type="checkbox" data-value='18-24' data-type='end'>18-24
<ul>
<li>开始<span class='start'>21</span>结束<span class='end'>23</span></li>
<li>开始<span class='start'>22</span>结束<span class='end'>13</span></li>
<li>开始<span class='start'>19</span>结束<span class='end'>11</span></li>
<li>开始<span class='start'>19</span>结束<span class='end'>1</span></li>
<li>开始<span class='start'>17</span>结束<span class='end'>22</span></li>
<li>开始<span class='start'>13</span>结束<span class='end'>16</span></li>
<li>开始<span class='start'>15</span>结束<span class='end'>9</span></li>
<li>开始<span class='start'>14</span>结束<span class='end'>2</span></li>
<li>开始<span class='start'>11</span>结束<span class='end'>23</span></li>
<li>开始<span class='start'>10</span>结束<span class='end'>17</span></li>
<li>开始<span class='start'>7</span>结束<span class='end'>9</span></li>
<li>开始<span class='start'>8</span>结束<span class='end'>5</span></li>
<li>开始<span class='start'>3</span>结束<span class='end'>22</span></li>
<li>开始<span class='start'>4</span>结束<span class='end'>15</span></li>
<li>开始<span class='start'>2</span>结束<span class='end'>11</span></li>
<li>开始<span class='start'>1</span>结束<span class='end'>5</span></li>
</ul>
<div style='text-align: right;'>共<b>16</b>条</div>
<script type="text/javascript">
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if(index > -1) {
this.splice(index, 1);
}
};
var arrStart = [],
arrEnd = [],num;
$(function() {
$("input").change(function() {
$("ul li").hide();
if($(this).is(":checked")) {
if($(this).attr("data-type") == "start") {
arrStart.push($(this).attr("data-value"))
} else {
arrEnd.push($(this).attr("data-value"))
}
} else {
if($(this).attr("data-type") == "start") {
arrStart.remove($(this).attr("data-value"))
} else {
arrEnd.remove($(this).attr("data-value"))
}
}
if(arrEnd.length > 0) {
for(var i = 0; i < arrEnd.length; i++) {
if(arrStart.length > 0) {
for(var j = 0; j < arrStart.length; j++) {
$("ul li").each(function() {
if((arrEnd[i].split("-")[0] <= $(this).find("span.end").text() * 1 && arrEnd[i].split("-")[1] >= $(this).find("span.end").text() * 1) && (arrStart[j].split("-")[0] <= $(this).find("span.start").text() * 1 && arrStart[j].split("-")[1] >= $(this).find("span.start").text() * 1)) {
$(this).show();
}
})
}
} else {
$("ul li").each(function() {
if(arrEnd[i].split("-")[0] <= $(this).find("span.end").text() * 1 && arrEnd[i].split("-")[1] >= $(this).find("span.end").text() * 1) {
$(this).show();
}
})
}
}
} else {
for(var i = 0; i < arrStart.length; i++) {
$("ul li").each(function() {
if(arrStart[i].split("-")[0] <= $(this).find("span.start").text() * 1 && arrStart[i].split("-")[1] >= $(this).find("span.start").text() * 1) {
$(this).show();
}
})
}
}
if(arrEnd.length < 1 && arrStart.length < 1) {
$("ul li").show();
}
num = 16;
$("ul li").each(function() {
if($(this).is(":hidden")){
num--
}
$("b").text(num)
})
})
})
</script>
</body>
</html>
