我正在尝试使用复选框
添加两个过滤选项。第一个将根据事物分配给谁(在本例中为 Nangle
或 Fahon
)过滤 divs
,第二个过滤器基于状态(在本例中为 Todo
或 Pending Us
)。到目前为止,下面是我的代码。
$(document).ready(function(e) {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span6">
<div class="portlet box blue checkbox-assigned">
<div class="portlet-title">
<div class="caption"><i class="icon-globe"></i>Jobs</div>
</div>
<label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="76" checked=""></span></div> Fahon</label>
<label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="60" checked=""></span></div> Nangle</label>
<label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="Todo" checked=""></span></div> Todo</label>
<label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="Pending Us" checked=""></span></div> Pending Us</label>
</div>
<div style="height: 500px; overflow-y: scroll">
<div class=" 76 Todo">
<div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
<div>
Shop Name: <strong style="padding-right: 3em">Pizza</strong> Job Name: <strong>Machine not working</strong> -
<strong>Todo</strong>
<a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>
<div>
Created By: <strong>Nangle</strong>
<a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>
</div>
<div>
Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:14</strong>
<a style="float: right; color: #000000;" href="index.php?/job/view/43"><strong>View</strong></a>
</div>
</div>
<div class="containerr collapsed">
<div class="headerTab"></div>
<div class="content dashboard-stat blue">
<p> message </p>
</div>
</div>
</div>
<div class=" 60 Todo">
<div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
<div>
Shop Name: <strong style="padding-right: 3em">The Castle</strong> Job Name: <strong>Accounts</strong> -
<strong>Todo</strong>
<a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>
<div>
Created By: <strong>Nangle</strong>
<a style="float: right; color: #000000;">Assigned To: <strong>Nangle</strong></a>
</div>
<div>
Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:19</strong>
<a style="float: right; color: #000000;" href="index.php?/job/view/44"><strong>View</strong></a>
</div>
</div>
<div class="containerr collapsed">
<div class="headerTab"></div>
<div class="content dashboard-stat blue">
<p> message </p>
</div>
</div>
</div>
<div class=" 76 Todo">
<div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
<div>
Shop Name: <strong style="padding-right: 3em">Time</strong> Job Name: <strong>Marketing Visit</strong> -
<strong>Todo</strong>
<a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>
<div>
Created By: <strong>Nangle</strong>
<a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>
</div>
<div>
Created On <strong>25/10/2017</strong> Last Updated: <strong>25/10/2017 10:32</strong>
<a style="float: right; color: #000000;" href="index.php?/job/view/51"><strong>View</strong></a>
</div>
</div>
<div class="containerr collapsed">
<div class="headerTab"></div>
<div class="content dashboard-stat blue">
<p> message </p>
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
$(document).ready(function() {
var $checkboxes = $('input:checkbox'); //get all the checkboxes
var $fields = $($checkboxes.map(function(){ return '.'+ this.value; }).get().join(',')); //get all the fields
$checkboxes.on('click', function(e) {
if (e.target.checked) {
//if you recheck a filter, we need to reevaluate all the checkboxes so we don't re-check one that should not be
$fields.show();
$checkboxes.not(':checked').each(function(){
$fields.filter('.'+ this.value).hide();
});
} else {
//if you uncheck a filter, just hide the related fields
$fields.filter('.'+ e.target.value).hide();
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span6">
<div class="portlet box blue checkbox-assigned">
<div class="portlet-title">
<div class="caption"><i class="icon-globe"></i>Jobs</div>
</div>
<label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="76" checked=""></span></div> Fahon</label>
<label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="60" checked=""></span></div> Nangle</label>
<label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="Todo" checked=""></span></div> Todo</label>
<label><div class="checker"><span class="checked"><input type="checkbox" name="colorCheckbox" value="Pending Us" checked=""></span></div> Pending Us</label>
</div>
<div style="height: 500px; overflow-y: scroll">
<div class=" 76 Todo">
<div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
<div>
Shop Name: <strong style="padding-right: 3em">Pizza</strong> Job Name: <strong>Machine not working</strong> -
<strong>Todo</strong>
<a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>
<div>
Created By: <strong>Nangle</strong>
<a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>
</div>
<div>
Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:14</strong>
<a style="float: right; color: #000000;" href="index.php?/job/view/43"><strong>View</strong></a>
</div>
</div>
<div class="containerr collapsed">
<div class="headerTab"></div>
<div class="content dashboard-stat blue">
<p> message </p>
</div>
</div>
</div>
<div class=" 60 Todo">
<div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
<div>
Shop Name: <strong style="padding-right: 3em">The Castle</strong> Job Name: <strong>Accounts</strong> -
<strong>Todo</strong>
<a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>
<div>
Created By: <strong>Nangle</strong>
<a style="float: right; color: #000000;">Assigned To: <strong>Nangle</strong></a>
</div>
<div>
Created On <strong>24/10/2017</strong> Last Updated: <strong>24/10/2017 11:19</strong>
<a style="float: right; color: #000000;" href="index.php?/job/view/44"><strong>View</strong></a>
</div>
</div>
<div class="containerr collapsed">
<div class="headerTab"></div>
<div class="content dashboard-stat blue">
<p> message </p>
</div>
</div>
</div>
<div class=" 76 Todo">
<div class="dashboard-stat green jobsCard" data-assigned="Fahon" data-status="Todo">
<div>
Shop Name: <strong style="padding-right: 3em">Time</strong> Job Name: <strong>Marketing Visit</strong> -
<strong>Todo</strong>
<a style="float: right; color: #000000;">Priority: <strong>Normal</strong></a> </div>
<div>
Created By: <strong>Nangle</strong>
<a style="float: right; color: #000000;">Assigned To: <strong>Fahon</strong></a>
</div>
<div>
Created On <strong>25/10/2017</strong> Last Updated: <strong>25/10/2017 10:32</strong>
<a style="float: right; color: #000000;" href="index.php?/job/view/51"><strong>View</strong></a>
</div>
</div>
<div class="containerr collapsed">
<div class="headerTab"></div>
<div class="content dashboard-stat blue">
<p> message </p>
</div>
</div>
</div>
</div>
</div>
</div>
关于javascript - 具有多个过滤器的 jQuery 复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47836024/