单选按钮过滤器使用jQuery / JavaScript的 [英] Radio Button filter using jquery/javascript
问题描述
HTML代码
< form action =id = 详细信息 >
< fieldset>
< label>< input type =radioname =Option1value =Critical> Critical< / label>
< label>< input type =radioname =Option1value =Non Critical> Non Critical< / label>
< label>< input type =radioname =Option1value =Achecked =checked> All< / label>
< br>
< br>
< label>< input type =radioname =Option2value =Internal> Internal< / label>
< label>< input type =radioname =Option2value =External> External< / label>
< label>< input type =radioname =Option2value =Achecked =checked> All< / label>
< / fieldset>
< / form>
< br>
< br>
< div>
< table id =DataTableborder =1>
< tr>
< th>来源< / th>
< th>类型< / th>
< / tr>
< tr>
< td class =来源>内部< / td>
< td class =Type> Critical< / td>
< / tr>
< tr>
< td class =来源>内部< / td>
< td class =Type>非关键< / td>
< / tr>
< tr>
< td class =Source>外部< / td>
< td class =Type> Critical< / td>
< / tr>
< tr>
< td class =Source>外部< / td>
< td class =Type>非关键< / td>
< / tr>
< / table>
< / div>
< button id ='btnFilter'> Go< / button>
脚本
$（'＃btnFilter'）。click（function（）{
var val1 = $（'[name = Option1]：checked'）。val（）;
val（）;
$（'tr'）。hide（）;
$ b $（' b $（'tr td.Source'）。each（function（）{
if（$（this）.text（）== val2）
{
$（this）.parent（）。show（）;
}
}）;
alert（ok）;
$（'tr'）。hide （）;
$（'tr td.Type'）。each（function（）{
if（$（this）.text（）== val1）
{
$ b $（this）.parent（）。show（）;
}
}）;
}）;
预期行为
用户将选择两个单选按钮值（如果未选中，则默认值将被考虑），然后应该过滤HTML表格同时考虑所选的值。如果用户更改了一个单选按钮的值，则应该相应地过滤HTML表格。
在我的代码中，每个过滤器的逻辑工作正常，但我不能够结合这两个逻辑，即如果我申请的第二个单选按钮的过滤器，那么它应该采取的数据，通过第一个单选按钮过滤，并应用显示/隐藏最重要的是，但是当我这样做，它考虑到整个数据。
目前的逻辑是 小提琴此外，当用户从任何单选按钮中选择所有，那么意味着所有的数据应该被认为是单选按钮。如果两个All都被选中，那么整个HTML表格数据。
$（'＃btnFilter '）.click（function（）{
var val1 = $（'[name = Option1]：checked'）。val（）;
var val2 = $（'[name = （）;
var src = $（this）.find（'。Source'）。text（） ）;
var typ = $（this）.find（'。Type'）。text（）;
if（（typ == val1 || val1 =='A'） &&（src == val2 || val2 =='A'））{
$（this）.show（）;
} else {
$（this）.hide （）;
}
}）;
}）;
http://jsfiddle.net/effone/ZxUUA/4/
这将确保行单元格的绑定。我相信这就是你想要的。
编辑：
@Charles& @ user2223335：
无需添加额外的标记或类，只需将else子句更改为如下所示：
else if（typ！=''&& src！=''）
将确保标题（tcat）不被隐藏。
http://jsfiddle.net/effone/ZxUUA/5/
There is an HTML table which contains two column(Source and Type). To filter the data, there are two radio buttons. I am able to filter the data for each radio button but I am struggling to combine the two radio button filter functions.
HTML Code
<form action="" id="Details">
<fieldset>
<label><input type="radio" name="Option1" value="Critical" >Critical</label>
<label><input type="radio" name="Option1" value="Non Critical" >Non Critical</label>
<label><input type="radio" name="Option1" value="A" checked="checked" >All</label>
<br>
<br>
<label><input type="radio" name="Option2" value="Internal" >Internal</label>
<label><input type="radio" name="Option2" value="External" >External</label>
<label><input type="radio" name="Option2" value="A" checked="checked" >All</label>
</fieldset>
</form>
<br>
<br>
<div>
<table id="DataTable" border="1">
<tr>
<th>Source</th>
<th>Type</th>
</tr>
<tr>
<td class="Source">Internal</td>
<td class="Type">Critical</td>
</tr>
<tr>
<td class="Source">Internal</td>
<td class="Type">Non Critical</td>
</tr>
<tr>
<td class="Source">External</td>
<td class="Type">Critical</td>
</tr>
<tr>
<td class="Source">External</td>
<td class="Type">Non Critical</td>
</tr>
</table>
</div>
<button id='btnFilter'>Go</button>
Script
$('#btnFilter').click(function() {
var val1 = $('[name=Option1]:checked').val();
var val2 = $('[name=Option2]:checked').val();
$('tr').hide();
$('tr td.Source').each(function() {
if ($(this).text() == val2 )
{
$(this).parent().show();
}
});
alert("ok");
$('tr').hide();
$('tr td.Type').each(function() {
if ($(this).text() == val1 )
{
$(this).parent().show();
}
});
});
Expected Behavior User will select both radio button values(if not selected then default values will be considered) and then HTML table should be filtered considered both the selected valued.If user changes value of one radio button, the HTML table should be filtered accordingly. In my code, each filter logic works fine but I am not able to combine both the logics i.e. If am applying the filter for second radio button then it should take data which is filtered by first radio button and apply show/hide on top of that but when i do it considers whole data.
Current logic is Fiddle
Also, When users selects all from any radio buttons then it means all data should be considered wrt to that radio button. If both All are selected then whole HTML table data.
$('#btnFilter').click(function() {
var val1 = $('[name=Option1]:checked').val();
var val2 = $('[name=Option2]:checked').val();
$('tr').each(function() {
var src = $(this).find('.Source').text();
var typ = $(this).find('.Type').text();
if ((typ == val1 || val1 == 'A' ) && (src == val2 || val2 == 'A' )) {
$(this).show();
} else {
$(this).hide();
}
});
});
http://jsfiddle.net/effone/ZxUUA/4/
This will ensure the bonding of the row cells. I believe this is what you want.
Edit:
@Charles & @user2223335:
No need to add additional markups or classes only changing the else clause to something like:
else if (typ !='' && src != '')
will ensure the header (tcat) not to hide.
http://jsfiddle.net/effone/ZxUUA/5/
这篇关于单选按钮过滤器使用jQuery / JavaScript的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
