如何根据选中的复选框显示表行
How to show table rows based on checkbox selected
我有三个类型为"一"、"二"和"三"的复选框和一个表格具有"类型"列，其中包含三个不同的值 一、二和三，跨几行。
我的要求是，根据选中或取消选中的复选框，仅应显示表中"类型"列的值与复选框值匹配的那些行。
For example,
复选框，则应显示将"一"作为"类型"的行。
如果同时选择"一"和"三"，则应显示类型为"一"和"三"的行。
同样，如果取消选择"三"，则应隐藏与"三"匹配为"类型"的行，仅显示类型为"一"的行，依此类推。
但是，我无法产生预期的结果，附上下面的代码，任何人都可以帮忙。
<html>
<head>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery. min.js"></script>
<title>Hello </title>
</head>
<body>
<table>
<tr>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="One" value= "One" />
One
</td>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="One" value= "Two" />
Two
</td>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="One" value= "Three" />
Three
</td>
</tr>
</table>
<table class="datatbl" border=1>
<tr>
<th>No.</th>
<th>Content</th>
<th>Type</th>
</tr>
<tr>
<td>1</td>
<td>this is first row</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>this is second row</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>this is third row</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>this is fourth row</td>
<td>One</td>
</tr>
<tr>
<td>5</td>
<td>this is fifth row</td>
<td>Two</td>
</tr>
<tr>
<td>6</td>
<td>this is sixth row</td>
<td>Three</td>
</tr>
</table>
<style>
.datatbl {
background-color: palegreen;
}
</style>
<script>
function filter_type(box) {
//alert("checked");
var cbs = document.getElementsByTagName('input');
var all_checked_types = [];
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
if(cbs[i].name.match(/^filter/)) {
if(cbs[i].checked) {
all_checked_types.push(cbs[i].value);
}
}
}
}
//alert("all checked "+ all_checked_types);
if (all_checked_types.length > 0) {
$('.datatbl tr').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
if (type && all_checked_types.indexOf(type) >= 0) {
//alert("matched");
$(this).show();
}
});
}
else {
$('.datatbl tr').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
$(this).show();
});
}
return true;
}
</script>
</body>
</html>
function filter_type(box) {
//alert("checked");
var cbs = document.getElementsByTagName('input');
var all_checked_types = [];
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
if(cbs[i].name.match(/^filter/)) {
if(cbs[i].checked) {
all_checked_types.push(cbs[i].value);
}
}
}
}
//alert("all checked "+ all_checked_types);
if (all_checked_types.length > 0) {
$('.datatbl tr').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
if (type && all_checked_types.indexOf(type) >= 0) {
//alert("matched");
$(this).show();
}
});
}
else {
$('.datatbl tr').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
$(this).show();
});
}
return true;
} .datatbl {
background-color: palegreen;
}<html>
<head>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery. min.js"></script>
<title>Hello </title>
</head>
<body>
<table>
<tr>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="One" value= "One" />
One
</td>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="One" value= "Two" />
Two
</td>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="One" value= "Three" />
Three
</td>
</tr>
</table>
<table class="datatbl" border=1>
<tr>
<th>No.</th>
<th>Content</th>
<th>Type</th>
</tr>
<tr>
<td>1</td>
<td>this is first row</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>this is second row</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>this is third row</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>this is fourth row</td>
<td>One</td>
</tr>
<tr>
<td>5</td>
<td>this is fifth row</td>
<td>Two</td>
</tr>
<tr>
<td>6</td>
<td>this is sixth row</td>
<td>Three</td>
</tr>
</table>
</body>
</html>我会使用这个截图：
jQuery(document).on('ready', function() {
var filter_magic = function(e) {
var trs = jQuery('.datatbl tr:not(:first)');
trs.hide();
var showAll = true;
jQuery('input[type="checkbox"][name="filter"]').each(function() {
if (jQuery(this).is(':checked')) {
var val = jQuery(this).val();
trs.each(function() {
var tr = jQuery(this);
var td = tr.find('td:nth-child(3)');
if (td.text() === val) {
tr.show();
showAll = false;
}
});
}
});
if (showAll) {
trs.show();
}
};
jQuery('input[type="checkbox"][name="filter"]').on('change', filter_magic);
filter_magic();
});
然后，您只需从html中删除onclick='return filter_type(this);'内容即可。
它确实显示选中复选框的行，如果未选择任何内容，则显示所有行。如果不希望出现这种行为，只需将var showAll = true;更改为var showAll = false;
这是一个演示：https://jsfiddle.net/njuzzv6L/2/
作为 Ahs N 答案的分支：
$("input[type='checkbox']").click(function() {
var vArr = [];
$(":checked").each(function() {
vArr.push($(this).attr("value").toLowerCase());
});
$("table:last-child tr").slice(1).each(function() {
if ($.inArray($(this).find("td").last().text().toLowerCase(), vArr) < 0 || vArr.length == 0) {
if($(this).is(':visible'))
$(this).fadeOut(); //OR $(this).hide();
}
else
if( !$(this).is(':visible'))
$(this).fadeIn(); //OR $(this).show();
});
});
这是 JSFiddle 演示版本 2
解决方案：
function filter_type(box) {
var cbs = document.getElementsByTagName('input');
var all_checked_types = [];
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
if(cbs[i].name.match(/^filter/)) {
if(cbs[i].checked) {
all_checked_types.push(cbs[i].value);
}
}
}
}
if (all_checked_types.length > 0) {
$('#datatbl tr').each(function (i, row) {
var $tds = $(this).find('td')
if ($tds.length) {
var type = $tds[2].innerText;
console.log(type)
if(!(type && all_checked_types.indexOf(type) >= 0)) {
$(this).hide();
}
else {
$(this).show();
}
}
});
}
else {
$('#datatbl tr').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
$(this).show();
});
}
return true;
}#datatbl {
background-color: palegreen;
}<html>
<head>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Hello </title>
</head>
<body>
<table>
<tr>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="One" value= "One" />One
</td>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="Two" value= "Two" />Two
</td>
<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter' id="Three" value= "Three" />Three
</td>
</tr>
</table>
<table id="datatbl" border=1>
<tr>
<th>Unique Id.</th>
<th>Content</th>
<th>Type</th>
</tr>
<tr>
<td>1</td>
<td>this is first row</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>this is second row</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>this is third row</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>this is fourth row</td>
<td>One</td>
</tr>
<tr>
<td>5</td>
<td>this is fifth row</td>
<td>Two</td>
</tr>
<tr>
<td>6</td>
<td>this is sixth row</td>
<td>Three</td>
</tr>
</table>
</body>
</html>给复选框一个类 .chkbox
$(".chkbox").click(function(){
var chkboxs = [];
$.each(".chkbox",function(i,field){
if(new jQuery(field).prop('checked'))
chkboxs.push(new jQuery(field).val());
});
$.each(".datatbl tr",function(i,field){
if($.inArray(new jQuery(field).find('td:last').text(),chkboxs))
new jQuery(field).show();
else
new jQuery(field).hide();
});
});
我选择不提供替代编码 - 而是展示如何使自己的代码工作。
首先，在整个编码中保持一致的良好做法 - 这意味着在您的 html 中，您的某些属性被不一致地引用（单与双），或者在某些情况下根本不被引用。 由于javascript在目标元素方面可能很挑剔，因此首先查找不干净和/或不统一的html总是好的。
既然如此，您的 html ID 输入标签并不是唯一的。ID 标签必须是唯一的。
最后，我在脚本中添加了一个"else"语句，因此，如果它没有"显示"，则"隐藏"行。
<html>
<head>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Hello </title>
<style>
.datatbl {
background-color: palegreen;
}
</style>
<script>
function filter_type(box) {
//alert("checked");
var cbs = document.getElementsByTagName('input');
var all_checked_types = [];
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
if(cbs[i].name.match(/^filter/)) {
if(cbs[i].checked) {
all_checked_types.push(cbs[i].value);
}
}
}
}
if (all_checked_types.length > 0) {
$('.datatbl tr:not(:has(th))').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
if (type && all_checked_types.indexOf(type) >= 0) {
$(this).show();
}else{
$(this).hide();
}
});
}else {
$('.datatbl tr:not(:has(th))').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
$(this).show();
});
}
return true;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" onclick="return filter_type(this);" name="filter" id="One" value= "One" />
One
</td>
<td>
<input type="checkbox" onclick="return filter_type(this);" name="filter" id="Two" value= "Two" />
Two
</td>
<td>
<input type="checkbox" onclick="return filter_type(this);" name="filter" id="Three" value= "Three" />
Three
</td>
</tr>
</table>
<table class="datatbl" border="1">
<thead>
<tr>
<th>No.</th>
<th>Content</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>this is first row</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>this is second row</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>this is third row</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>this is fourth row</td>
<td>One</td>
</tr>
<tr>
<td>5</td>
<td>this is fifth row</td>
<td>Two</td>
</tr>
<tr>
<td>6</td>
<td>this is sixth row</td>
<td>Three</td>
</tr>
</tbody>
</table>
</body>
</html>
我就是这样做的：
$("input[type='checkbox']").click(function() {
$("tr").fadeIn();
if ($(":checked").length > 0) {
var vArr = [];
$(":checked").each(function() {
vArr.push($(this).attr("value").toLowerCase());
});
$("table:last-child tr").slice(1).each(function() {
if ($.inArray($(this).find("td").last().text().toLowerCase(), vArr) < 0) {
$(this).fadeOut();
}
});
}
});
这是JSFiddle演示
我看到你已经选择了一个答案，但是我觉得有必要提出不太复杂的解决方案：如果选中，则显示行，如果未选中，则不显示行。
我从标记中删除了代码。
我将代码简化为更改操作事件处理程序。
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
var cbs = $('.checkcontainer').find('input[type="checkbox"]');
cbs.each(function() {
var mycheckbox = $(this);
var isChecked = mycheckbox[0].checked;
$('.datatbl tr').not(":eq(0)").filter(function() {
return $(this).find('td').eq(2).text() == mycheckbox.val();
}).toggle(isChecked);
});
});
修订了与此关联的复选框标记：
<input type='checkbox' name='filter' id="One" value="One" />
替代策略：
在我看来，这仍然不是超级确定的，所以这里是使用数据属性而不是可能脆弱的"某些列中的文本"的修订版。
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
var cbs = $('.checkcontainer').find('input[type="checkbox"]');
cbs.each(function() {
var mycheckbox = $(this);
$('.datatbl tr').filter(function() {
return $(this).data('rowtype') == mycheckbox.val();
}).toggle(mycheckbox[0].checked);
});
});
修改了上次代码更改的标记截图示例：
<tr data-rowtype="Three">
<td>3</td>
<td>this is third row</td>
<td>Three is here does not matter</td>
</tr>
注意：如果您只是在任何复选框上触发更改事件，并且它为所有这些复选框设置，则其中任何一个都将设置初始状态（隐藏显示）。把它放在文件中准备好，你就可以开始了。
$('.checkcontainer').find('input[type="checkbox"]').eq(0).trigger('change');
这是一个小提琴，你可以在行动中看到它：https://jsfiddle.net/6Lk4om0u/
相关文章：
- Bootstrap使用复选框显示和隐藏id
- oncheck复选框显示主干中的数据
- AngularJS过滤器使用ng个重复复选框显示所有页面加载
- 在同一行中为每个复选框显示和隐藏文本字段
- 为每个选中的复选框显示相同的问题集.(PHP和JS/Jquery）
- 我需要有关根据复选框显示和隐藏数据的帮助
- 如何使用复选框显示表单的更多选项并更改表单的操作属性
- 将选中的复选框显示在一个部分中，未选中的复选框显示在另一个部分中
- jQuery / JavaScript 复选框显示多个和单个选择中选中的复选框的数量
- 如何根据选中的复选框显示表行
- 如何为不同的复选框显示不同的下拉列表，然后在选中多个复选框时显示不同的下拉列表
- 让复选框显示某些内容
- 根据复选框显示/隐藏表行
- 根据复选框显示文本框
- 如何使用javascript复选框显示警报消息
- JQuery过滤器复选框显示/隐藏元素
- 正在选中复选框显示名称
- 在Highcharts中使用按钮/复选框显示/隐藏数据的示例
- EXTJS复选框显示为[object object]
- 复选框显示在for循环中，如何在Javascript中获取getElementById
