JSFiddle - React, Tailwind, and code Playground
HTML
<form id="flagSearchForm" name="flagForm">
<div class="grid-unit grid-unit-9-14">
<h4>
Search by Flag Value
</h4>
<div class="flagSearch">
<div class="wrapper grids">
<div class="flagfields">
<div class="grid-unit grid-unit-3-14">
<fieldset> <span class="flagName">hasBib</span>
<input type="button" value="N/A" class="tri-state ignore" id="hasBib">
<input type="radio" name="hasBib" value="ignore" id="hasBib-ignore" class="radio-button" checked>
<label for="hasBib-ignore">Ignore</label>
<input type="radio" name="hasBib" value="yes" id="hasBib-yes" class="radio-button">
<label for="hasBib-yes">Yes</label>
<input type="radio" name="hasBib" value="no" id="hasBib-no" class="radio-button">
<label for="hasBib-no">No</label>
</fieldset>
</div>
</div>
<div class="flagfields">
<div class="grid-unit grid-unit-3-14">
<fieldset> <span class="flagName">hasChoice</span>
<input type="button" value="N/A" class="tri-state ignore" id="hasChoice">
<input type="radio" name="hasChoice" value="ignore" id="hasChoice-ignore" class="radio-button" checked>
<label for="hasChoice-ignore">Ignore</label>
<input type="radio" name="hasChoice" value="yes" id="hasChoice-yes" class="radio-button">
<label for="hasChoice-yes">Yes</label>
<input type="radio" name="hasChoice" value="no" id="hasChoice-no" class="radio-button">
<label for="hasChoice-no">No</label>
...
JavaScript
function filterProjects(searchInput) {
$('input:radio').each(function () {
if ($(this).is(':checked')) {
var $currentProject = $(this);
var checkedInputValue = $(this).val();
console.log(checkedInputValue);
var flagValue = '0'; // Not sure what is setting this
if ((checkedInputValue == "yes" && flagValue == "0") || (checkedInputValue == "no" && flagValue == "1")) {
$currentProject.hide();
}
var filter = '';
if ($(this).find(".projectName").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
}
}
});
}
$("#searchProjects").keyup(function () {
filterProjects($(this));
});
$("#flagSearchForm").submit(function (event) {
event.preventDefault();
filterProjects($("#searchProjects"));
});