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.