Develop Reference

programmatically hide Bootstrap accordion

In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>

Perform certain action when radio button is checked

How to show input with class searchFilter below radio button only when that radio button is checked and hide all the others .searchFilter inputs?
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>

No need for javascript for this, you can do this with css:
.searchFilter {
display: none;
/* hide search filters */
}
input[type=radio]:checked~.searchFilter {
display: block;
/* show filters that appear after a checked input */
}
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example1">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example2">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example3">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>

Do this way:
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
$('.searchFilter').hide();
$('input[type=radio]:checked').next('.searchFilter:first').show();
});
});

This should do the trick.
$(document).ready(function(){
$('.filter-option').children('input[type=radio]').on('change', function(){
$(this).parents('.details').find('input[type=radio]').each(function(){
$(this).is(':checked') ? $(this).siblings('.searchFilter').show() : $(this).siblings('.searchFilter').hide();
});
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example4" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>

Please check my code it might help you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//For first form
//select last radiobutton as default
$("form").find(".searchFilter").attr("disabled",true).val("")
$("form").find(".searchFilter").last().attr("disabled",false)
//On radiobuttion selection change
$('input[type=radio]').on('change',function(){
$("form").find(".searchFilter").attr("disabled",true).val("");
$(this).siblings(".searchFilter").attr("disabled",false)
});
});
</script>
</head>
<body>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form >
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
</body>
</html>

Access the nested path of the input elements

HTML:
<div id="quiz">
<div id="question">
<p id="quiz-txt">Your Name is:</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Bob" value="Bob" class="options">
<label for="Bob">Bob</label>
</div>
<div id="ans">
<input type="checkbox" id="David" value="David" class="options">
<label for="David">David</label>
</div>
<div id="ans">
<input type="checkbox" id="Jack" value="Jack" class="options">
<label for="Jack">Jack</label>
</div>
</ul>
</div>
.
.
.
.
<div id="question">
<p id="quiz-txt">This is the final question.</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Yes" value="Yes" class="options">
<label for="Yes">Yes</label>
</div>
<div id="ans">
<input type="checkbox" id="No" value="No" class="options">
<label for="No">No</label>
</div>
</ul>
</div>
There are about 10 of these divs (questions) which are created on the go (getting an array from the server).
So, my question is how I can get the values of checkboxes that are checked?
Here is what I tried in my JavaScript:
$('#quiz').children('#question').children('#quiz-opt').children('#ans').children('.options:checked').each(function () {
console.log($(this).val());
});

This (albeit jQuery free) solution worked for me. Check some of the boxes and then click the check button
function check() {
document.querySelectorAll(".options:checked").forEach(el => {
console.log(el.value);
});
console.log("-----------------------");
}
<div id="quiz">
<div id="question">
<p id="quiz-txt">Your Name is:</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Bob" value="Bob" class="options">
<label for="Bob">Bob</label>
</div>
<div id="ans">
<input type="checkbox" id="David" value="David" class="options">
<label for="David">David</label>
</div>
<div id="ans">
<input type="checkbox" id="Jack" value="Jack" class="options">
<label for="Jack">Jack</label>
</div>
</ul>
</div>
.
.
.
.
<div id="question">
<p id="quiz-txt">This is the final question.</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Yes" value="Yes" class="options">
<label for="Yes">Yes</label>
</div>
<div id="ans">
<input type="checkbox" id="No" value="No" class="options">
<label for="No">No</label>
</div>
</ul>
</div>
<button onClick="check()">Check values</button>

You don't need all that path, the last bit of it is enough $('.options:checked'). Also no need to convert this into a jQuery object, simply access its JavaScript value property:
function check() {
$('.options:checked').each(function() {
console.log(this.value);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quiz">
<div id="question">
<p id="quiz-txt">Your Name is:</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Bob" value="Bob" class="options">
<label for="Bob">Bob</label>
</div>
<div id="ans">
<input type="checkbox" id="David" value="David" class="options">
<label for="David">David</label>
</div>
<div id="ans">
<input type="checkbox" id="Jack" value="Jack" class="options">
<label for="Jack">Jack</label>
</div>
</ul>
</div>
. . . .
<div id="question">
<p id="quiz-txt">This is the final question.</p>
<ul id="quiz-opt">
<div id="ans">
<input type="checkbox" id="Yes" value="Yes" class="options">
<label for="Yes">Yes</label>
</div>
<div id="ans">
<input type="checkbox" id="No" value="No" class="options">
<label for="No">No</label>
</div>
</ul>
</div>
<button type="button" onclick="check()">Check</button>

Jquery Generically, show/Hide division within division in Yes/No Radio button

Basically, I wanted to show/hide the div by clicking Yes/No Radio button. I have also done a sample types in the fiddle link below. I want to make this Generic, like one function can do for all the yes/no questions. and i want to avoid the multiple if condtion in jquery.
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no"> No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
My jquery look this.
$('input[name="student"]:radio').change(function () {
var radio_value = ($('input:radio[name="student"]:checked').val());
if (radio_value == 'yes') {
$('.studentsType').slideDown("fast");
}
else if (radio_value == 'no') {
$('.studentsType').slideUp("fast");
}
});
$('input[name="gradstd"]:radio').change(function () {
var radio_value = ($('input:radio[name="gradstd"]:checked').val());
if (radio_value == 'yes') {
$('.departName').slideDown("fast");
}
else if (radio_value == 'no') {
$('.departName').slideUp("fast");
}
});
$('input[name="living"]:radio').change(function () {
var radio_value = ($('input:radio[name="living"]:checked').val());
if (radio_value == 'yes') {
$('.earning').slideDown("fast");
}
else if (radio_value == 'no') {
$('.earning').slideUp("fast");
}
});
Links for Fiddle:
http://jsfiddle.net/mgrgfqfd/
Please help !!

You can use a data attribute in the radio buttons to indicate which DIV should be toggled.
$(':radio[data-rel]').change(function() {
var rel = $("." + $(this).data('rel'));
if ($(this).val() == 'yes') {
rel.slideDown();
} else {
rel.slideUp();
rel.find(":text,select").val("");
rel.find(":radio,:checkbox").prop("checked", false);
}
});
.studentsType,
.departName,
.earning {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes" data-rel="studentsType">Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no" data-rel="studentsType">No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes" data-rel="departName">Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no" data-rel="departName">No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes" data-rel="earning">Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no" data-rel="earning">No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>

If you keep this sort of structure it can be achieved with a tiny bit of code:
http://jsfiddle.net/mgrgfqfd/2/
HTML:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group" data-target="gruduate">
<label class="radio-inline">
<input type="radio" name="student" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
JS:
$('input:radio').on('change', function() {
$(this).parents('.control-group').next('div.optional').toggle( $(this).val() == 'yes' );
});
Just ensure that your yes/no buttons are within a control-group and you put the optional elements directly after it inside a div with a class of .optional

Below code will find next div and perform sliding in jquery this helps you to avoid multiple redundant lines of code and ifs.
$('input:radio').on('change', function () {//Register change event for all radio button
if ($(this).val() == 'yes') {//check value of selected radio is yes
$(this).parent().parent().next('div').slideDown("fast");
}
else if ($(this).val() == 'no') {//check value of selected radio is no
$(this).parent().parent().next('div').slideUp("fast");
}
});

Multiple fields single model update in knockoutjs

I have a form with multiple fields in knockoutjs. I am creating model data with json.
I have created a HTML Form with multiple fileds for searching in this data via knockouts.
The problem i am getting is the searching/filtration going on "OR" condition basis. When select other filter previous one gone and searching goes on current fields only.How can i overcome with this problem.
Knockout JS
var outfitterJSON = <?php echo $this->JSON; ?>
var ViewModel = function(outfittersJSON) {
var self = this;
// Inputs
self.nameSearch = ko.observable();
self.registrationNumber = ko.observable();
self.unitNumber = ko.observable();
// Checkboxes & Radios
self.activeFilters = ko.observableArray([]);
self.regionFilters = ko.observableArray([]);
// Items
self.outfitters = ko.observableArray([]);
self.outfitters_temp = ko.observableArray([]);
//populate outfitters object and add visible flag for knockout to show/hide
outfittersJSON.forEach(function(value) {
value.visible = ko.observable(true);
self.outfitters().push(value);
});
// Search by Checkbox filters
self.activeFilters.subscribe(function(filters) {
// console.log(filters);
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (filters.length) {
var shouldShowOutfitter = true;
//hide based on fitler array
filters.forEach(function(filter){
if (outfitter[filter] !== 'yes')
shouldShowOutfitter = false;
});
outfitter.visible(shouldShowOutfitter);
} else {
//show all if none are selected
outfitter.visible(true);
}
});
});
// Search by Business Name
self.nameSearch.subscribe(function(query) {
//console.log(query);
//console.log(self.outfitters())
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['businessname'].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Registration Number
self.registrationNumber.subscribe(function(regNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['reg'].indexOf(regNum) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Hunt Units
self.unitNumber.subscribe(function(unitNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (outfitter['unit'].indexOf(unitNum.toString()) >= 0) {
outfitter.visible(true);
} else {
//show all if none are selected
outfitter.visible(false);
}
});
});
// Search by Region Numbers
self.regionFilters.subscribe(function(region) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['region'] === region) {
outfitter.visible(true);
} else if (region === 'any') {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
};
var vm = new ViewModel(outfitterJSON);
ko.applyBindings(vm);
var $ = jQuery.noConflict();
// Reset all filters visually and fire click/change events
// so KO.js knows that items have been changed and can update accordingly
$('#outfitter-filter').on('reset', function (e) {
e.preventDefault();
$(this).find('input, select, textarea').each(function () {
if ($(this).is('input[type="radio"], input[type="checkbox"]')) {
if ($(this).is(':checked') !== $(this)[0].defaultChecked) {
$(this).val($(this)[0].defaultChecked);
$(this).trigger('click');
$(this).trigger('change');
}
} else {
if ($(this).val() !== $(this)[0].defaultValue) {
$(this).val($(this)[0].defaultValue);
$(this).change();
}
}
});
});
HTML Form
<form action="" id="outfitter-filter" class="search_form">
<p><input type="reset" class="reset btn btn-sm btn-primary">
<strong>Filters:</strong> <span data-bind="text: nameSearch"></span> <span data-bind="text: activeFilters"></span>
</p>
<div class="row">
<div class="col-md-2">
<!-- Name Search -->
<label for="">Business Name</label>
<input type="search" data-bind="value: nameSearch, valueUpdate: 'keyup'" autocomplete="off" placeholder="Search by Name"/>
</div>
<div class="col-md-2">
<!-- Registration Number -->
<label for="">Registration #</label>
<input type="search" data-bind="value: registrationNumber, valueUpdate: 'keyup'" autocomplete="off" placeholder="Registration Number"/>
</div>
<div class="col-md-2">
<!-- Unit # -->
<label for="">Hunt Unit #</label>
<input type="search" data-bind="value: unitNumber, valueUpdate: 'keyup'" id="hunt-unit" maxlength="3" autocomplete="off" placeholder="Hunt Unit #"/>
</div>
<div class="col-md-4">
<!-- Regions -->
<label for="">Regions</label> <br>
<label class="radio-inline">
<input type="radio" name="NW" value="NW" data-bind="checked: regionFilters"> NW
</label>
<label class="radio-inline">
<input type="radio" name="SW" value="SW" data-bind="checked: regionFilters"> SW
</label>
<label class="radio-inline">
<input type="radio" name="NE" value="NE" data-bind="checked: regionFilters"> NE
</label>
<label class="radio-inline">
<input type="radio" name="SE" value="SE" data-bind="checked: regionFilters"> SE
</label>
<label class="radio-inline">
<input type="radio" name="any" value="any" data-bind="checked: regionFilters"> Any Region
</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Big Game Interests -->
<fieldset id="big-game">
<div class="row">
<div class="col-md-12">
<strong>Big Game of Interest:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="muledeer" type="checkbox" name="muledeer" data-bind="checked: activeFilters">Mule Deer</label></div>
<div class="checkbox"><label><input value="whitetaildeer" type="checkbox" name="whitetaildeer" data-bind="checked: activeFilters">Whitetail Deer</label></div>
<div class="checkbox"><label><input value="antelope" type="checkbox" name="antelope" data-bind="checked: activeFilters">Antelope</label></div>
<div class="checkbox"><label><input value="elk" type="checkbox" name="elk" data-bind="checked: activeFilters">Elk</label></div>
<div class="checkbox"><label><input value="mountainlion" type="checkbox" name="mountainlion" data-bind="checked: activeFilters">Mountain Lion</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="mountaingoat" type="checkbox" name="mountaingoat" data-bind="checked: activeFilters">Mountain Goat</label></div>
<div class="checkbox"><label><input value="bear" type="checkbox" name="bear" data-bind="checked: activeFilters">Bear</label></div>
<div class="checkbox"><label><input value="bighornsheep" type="checkbox" name="bighornsheep" data-bind="checked: activeFilters">Bighorn Sheep</label></div>
<div class="checkbox"><label><input value="moose" type="checkbox" name="moose" data-bind="checked: activeFilters">Moose</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Small Game -->
<fieldset id="small-game">
<p><strong>Small Game of Interest:</strong></p>
<div class="checkbox"><label><input value="smallgame" type="checkbox" name="smallgame" data-bind="checked: activeFilters">General Small Game</label></div>
<div class="checkbox"><label><input value="turkey" type="checkbox" name="turkey" data-bind="checked: activeFilters">Turkey</label></div>
<div class="checkbox"><label><input value="uplandbirds" type="checkbox" name="uplandbirds" data-bind="checked: activeFilters">Upland Birds</label></div>
<div class="checkbox"><label><input value="waterfowl" type="checkbox" name="waterfowl" data-bind="checked: activeFilters">Waterfowl</label></div>
<div class="checkbox"><label><input value="varmints" type="checkbox" name="varmints" data-bind="checked: activeFilters">Varmints</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Lodging -->
<fieldset id="lodging">
<div class="row">
<div class="col-md-12">
<strong>Lodging:</strong>
</div>
<div class="col-md-4">
<div class="checkbox"><label><input value="lodge" type="checkbox" name="lodge" data-bind="checked: activeFilters">Lodge</label></div>
<div class="checkbox"><label><input value="cabins" type="checkbox" name="cabins" data-bind="checked: activeFilters">Cabins</label></div>
<div class="checkbox"><label><input value="trailers" type="checkbox" name="trailers" data-bind="checked: activeFilters">Trailers</label></div>
<div class="checkbox"><label><input value="tents" type="checkbox" name="tents" data-bind="checked: activeFilters">Tents</label></div>
<div class="checkbox"><label><input value="motel" type="checkbox" name="motel" data-bind="checked: activeFilters">Motel</label></div>
</div>
<div class="col-md-8">
<div class="checkbox"><label><input value="wildernesscamps" type="checkbox" name="wildernesscamps" data-bind="checked: activeFilters">Wilderness Camps</label></div>
<div class="checkbox"><label><input value="handicapaccessible" type="checkbox" name="handicapaccessible" data-bind="checked: activeFilters">Handicap Accessible</label></div>
<div class="checkbox"><label><input value="camping" type="checkbox" name="camping" data-bind="checked: activeFilters">Camping</label></div>
<div class="checkbox"><label><input value="dropcamps" type="checkbox" name="dropcamps" data-bind="checked: activeFilters">Drop Camps</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Summer Recreation -->
<fieldset id="summer">
<div class="row">
<div class="col-md-12">
<strong>Summer Recreation:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="flyfishing" type="checkbox" name="flyfishing" data-bind="checked: activeFilters">Fly Fishing</label></div>
<div class="checkbox"><label><input value="spincasting" type="checkbox" name="spincasting" data-bind="checked: activeFilters">Spin Casting</label></div>
<div class="checkbox"><label><input value="lakefishing" type="checkbox" name="lakefishing" data-bind="checked: activeFilters">Lake Fishing</label></div>
<div class="checkbox"><label><input value="streamfishing" type="checkbox" name="streamfishing" data-bind="checked: activeFilters">Stream Fishing</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="floattrips" type="checkbox" name="floattrips" data-bind="checked: activeFilters">Float Trips</label></div>
<div class="checkbox"><label><input value="rafting" type="checkbox" name="rafting" data-bind="checked: activeFilters">Rafting</label></div>
<div class="checkbox"><label><input value="other" type="checkbox" name="other" data-bind="checked: activeFilters">Other</label></div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Special Services -->
<fieldset id="services">
<div class="row">
<div class="col-md-12">
<strong>Special Services:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="packtrips" type="checkbox" name="packtrips" data-bind="checked: activeFilters">Pack Trips</label></div>
<div class="checkbox"><label><input value="horserides" type="checkbox" name="horserides" data-bind="checked: activeFilters">Horse Rides</label></div>
<div class="checkbox"><label><input value="cattledrives" type="checkbox" name="cattledrives" data-bind="checked: activeFilters">Cattle Drives</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="horserental" type="checkbox" name="horserental" data-bind="checked: activeFilters">Horse Rental</label></div>
<div class="checkbox"><label><input value="guideschools" type="checkbox" name="guideschools" data-bind="checked: activeFilters">Guide Schools</label></div>
<div class="checkbox"><label><input value="overnighttrips" type="checkbox" name="overnighttrips" data-bind="checked: activeFilters">Overnight Trips</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Winter -->
<fieldset id="winter">
<p><strong>Winter:</strong></p>
<div class="checkbox"><label><input value="sleighrides" type="checkbox" name="sleighrides" data-bind="checked: activeFilters">Sleigh Rides</label></div>
<div class="checkbox"><label><input value="snowmobiletours" type="checkbox" name="snowmobiletours" data-bind="checked: activeFilters">SnowMobile Tours/Rental</label></div>
<div class="checkbox"><label><input value="skiing" type="checkbox" name="skiing" data-bind="checked: activeFilters">Skiing</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Operating Area -->
<fieldset id="operating-area">
<p><strong>Operating Area</strong></p>
<div class="checkbox"><label><input value="blm" type="checkbox" name="blm" data-bind="checked: activeFilters">BLM</label></div>
<div class="checkbox"><label><input value="nationalforest" type="checkbox" name="nationalforest" data-bind="checked: activeFilters">National Forest</label></div>
<div class="checkbox"><label><input value="privateland" type="checkbox" name="privateland" data-bind="checked: activeFilters">Private Land</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Other -->
<fieldset id="other">
<p><strong>Other</strong></p>
<div class="checkbox"><label><input value="ranchingforwildlife" type="checkbox" name="ranchingforwildlife" data-bind="checked: activeFilters">Ranching for Wildlife</label></div>
<div class="checkbox"><label><input value="workingcattleranch" type="checkbox" name="workingcattleranch" data-bind="checked: activeFilters">Working Cattle Ranch</label></div>
</fieldset>
</div>
</div>

I've copied your code to the snippet below, and it runs as I expect (output on the console indicates whether items would be shown).
var ViewModel = function(outfittersJSON) {
var self = this;
// Inputs
self.nameSearch = ko.observable();
self.registrationNumber = ko.observable();
self.unitNumber = ko.observable();
// Checkboxes & Radios
self.activeFilters = ko.observableArray([]);
self.regionFilters = ko.observableArray([]);
// Items
self.outfitters = ko.observableArray([]);
self.outfitters_temp = ko.observableArray([]);
//populate outfitters object and add visible flag for knockout to show/hide
outfittersJSON.forEach(function(value) {
value.visible = ko.observable(true);
self.outfitters().push(value);
});
// Search by Checkbox filters
self.activeFilters.subscribe(function(filters) {
console.debug(filters);
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (filters.length) {
var shouldShowOutfitter = true;
//hide based on fitler array
console.debug("Checking", outfitter, "for", filters);
filters.forEach(function(filter){
if (outfitter[filter] !== 'yes')
shouldShowOutfitter = false;
});
outfitter.visible(shouldShowOutfitter);
console.debug("Show?", shouldShowOutfitter);
} else {
//show all if none are selected
outfitter.visible(true);
}
});
});
// Search by Business Name
self.nameSearch.subscribe(function(query) {
//console.log(query);
//console.log(self.outfitters())
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['businessname'].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Registration Number
self.registrationNumber.subscribe(function(regNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['reg'].indexOf(regNum) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Hunt Units
self.unitNumber.subscribe(function(unitNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (outfitter['unit'].indexOf(unitNum.toString()) >= 0) {
outfitter.visible(true);
} else {
//show all if none are selected
outfitter.visible(false);
}
});
});
// Search by Region Numbers
self.regionFilters.subscribe(function(region) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['region'] === region) {
outfitter.visible(true);
} else if (region === 'any') {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
};
var vm = new ViewModel([{'muledeer':'yes'},{'muledeer':'yes', 'whitetaildeer':'yes'}]);
ko.applyBindings(vm);
var $ = jQuery.noConflict();
// Reset all filters visually and fire click/change events
// so KO.js knows that items have been changed and can update accordingly
$('#outfitter-filter').on('reset', function (e) {
e.preventDefault();
$(this).find('input, select, textarea').each(function () {
if ($(this).is('input[type="radio"], input[type="checkbox"]')) {
if ($(this).is(':checked') !== $(this)[0].defaultChecked) {
$(this).val($(this)[0].defaultChecked);
$(this).trigger('click');
$(this).trigger('change');
}
} else {
if ($(this).val() !== $(this)[0].defaultValue) {
$(this).val($(this)[0].defaultValue);
$(this).change();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="outfitter-filter" class="search_form">
<p>
<input type="reset" class="reset btn btn-sm btn-primary">
<strong>Filters:</strong> <span data-bind="text: nameSearch"></span> <span data-bind="text: activeFilters"></span>
</p>
<div class="row">
<div class="col-md-2">
<!-- Name Search -->
<label for="">Business Name</label>
<input type="search" data-bind="value: nameSearch, valueUpdate: 'keyup'" autocomplete="off" placeholder="Search by Name" />
</div>
<div class="col-md-2">
<!-- Registration Number -->
<label for="">Registration #</label>
<input type="search" data-bind="value: registrationNumber, valueUpdate: 'keyup'" autocomplete="off" placeholder="Registration Number" />
</div>
<div class="col-md-2">
<!-- Unit # -->
<label for="">Hunt Unit #</label>
<input type="search" data-bind="value: unitNumber, valueUpdate: 'keyup'" id="hunt-unit" maxlength="3" autocomplete="off" placeholder="Hunt Unit #" />
</div>
<div class="col-md-4">
<!-- Regions -->
<label for="">Regions</label>
<br>
<label class="radio-inline">
<input type="radio" name="NW" value="NW" data-bind="checked: regionFilters">NW
</label>
<label class="radio-inline">
<input type="radio" name="SW" value="SW" data-bind="checked: regionFilters">SW
</label>
<label class="radio-inline">
<input type="radio" name="NE" value="NE" data-bind="checked: regionFilters">NE
</label>
<label class="radio-inline">
<input type="radio" name="SE" value="SE" data-bind="checked: regionFilters">SE
</label>
<label class="radio-inline">
<input type="radio" name="any" value="any" data-bind="checked: regionFilters">Any Region
</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Big Game Interests -->
<fieldset id="big-game">
<div class="row">
<div class="col-md-12">
<strong>Big Game of Interest:</strong>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="muledeer" type="checkbox" name="muledeer" data-bind="checked: activeFilters">Mule Deer</label>
</div>
<div class="checkbox">
<label>
<input value="whitetaildeer" type="checkbox" name="whitetaildeer" data-bind="checked: activeFilters">Whitetail Deer</label>
</div>
<div class="checkbox">
<label>
<input value="antelope" type="checkbox" name="antelope" data-bind="checked: activeFilters">Antelope</label>
</div>
<div class="checkbox">
<label>
<input value="elk" type="checkbox" name="elk" data-bind="checked: activeFilters">Elk</label>
</div>
<div class="checkbox">
<label>
<input value="mountainlion" type="checkbox" name="mountainlion" data-bind="checked: activeFilters">Mountain Lion</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="mountaingoat" type="checkbox" name="mountaingoat" data-bind="checked: activeFilters">Mountain Goat</label>
</div>
<div class="checkbox">
<label>
<input value="bear" type="checkbox" name="bear" data-bind="checked: activeFilters">Bear</label>
</div>
<div class="checkbox">
<label>
<input value="bighornsheep" type="checkbox" name="bighornsheep" data-bind="checked: activeFilters">Bighorn Sheep</label>
</div>
<div class="checkbox">
<label>
<input value="moose" type="checkbox" name="moose" data-bind="checked: activeFilters">Moose</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Small Game -->
<fieldset id="small-game">
<p><strong>Small Game of Interest:</strong>
</p>
<div class="checkbox">
<label>
<input value="smallgame" type="checkbox" name="smallgame" data-bind="checked: activeFilters">General Small Game</label>
</div>
<div class="checkbox">
<label>
<input value="turkey" type="checkbox" name="turkey" data-bind="checked: activeFilters">Turkey</label>
</div>
<div class="checkbox">
<label>
<input value="uplandbirds" type="checkbox" name="uplandbirds" data-bind="checked: activeFilters">Upland Birds</label>
</div>
<div class="checkbox">
<label>
<input value="waterfowl" type="checkbox" name="waterfowl" data-bind="checked: activeFilters">Waterfowl</label>
</div>
<div class="checkbox">
<label>
<input value="varmints" type="checkbox" name="varmints" data-bind="checked: activeFilters">Varmints</label>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Lodging -->
<fieldset id="lodging">
<div class="row">
<div class="col-md-12">
<strong>Lodging:</strong>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input value="lodge" type="checkbox" name="lodge" data-bind="checked: activeFilters">Lodge</label>
</div>
<div class="checkbox">
<label>
<input value="cabins" type="checkbox" name="cabins" data-bind="checked: activeFilters">Cabins</label>
</div>
<div class="checkbox">
<label>
<input value="trailers" type="checkbox" name="trailers" data-bind="checked: activeFilters">Trailers</label>
</div>
<div class="checkbox">
<label>
<input value="tents" type="checkbox" name="tents" data-bind="checked: activeFilters">Tents</label>
</div>
<div class="checkbox">
<label>
<input value="motel" type="checkbox" name="motel" data-bind="checked: activeFilters">Motel</label>
</div>
</div>
<div class="col-md-8">
<div class="checkbox">
<label>
<input value="wildernesscamps" type="checkbox" name="wildernesscamps" data-bind="checked: activeFilters">Wilderness Camps</label>
</div>
<div class="checkbox">
<label>
<input value="handicapaccessible" type="checkbox" name="handicapaccessible" data-bind="checked: activeFilters">Handicap Accessible</label>
</div>
<div class="checkbox">
<label>
<input value="camping" type="checkbox" name="camping" data-bind="checked: activeFilters">Camping</label>
</div>
<div class="checkbox">
<label>
<input value="dropcamps" type="checkbox" name="dropcamps" data-bind="checked: activeFilters">Drop Camps</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Summer Recreation -->
<fieldset id="summer">
<div class="row">
<div class="col-md-12">
<strong>Summer Recreation:</strong>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="flyfishing" type="checkbox" name="flyfishing" data-bind="checked: activeFilters">Fly Fishing</label>
</div>
<div class="checkbox">
<label>
<input value="spincasting" type="checkbox" name="spincasting" data-bind="checked: activeFilters">Spin Casting</label>
</div>
<div class="checkbox">
<label>
<input value="lakefishing" type="checkbox" name="lakefishing" data-bind="checked: activeFilters">Lake Fishing</label>
</div>
<div class="checkbox">
<label>
<input value="streamfishing" type="checkbox" name="streamfishing" data-bind="checked: activeFilters">Stream Fishing</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="floattrips" type="checkbox" name="floattrips" data-bind="checked: activeFilters">Float Trips</label>
</div>
<div class="checkbox">
<label>
<input value="rafting" type="checkbox" name="rafting" data-bind="checked: activeFilters">Rafting</label>
</div>
<div class="checkbox">
<label>
<input value="other" type="checkbox" name="other" data-bind="checked: activeFilters">Other</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Special Services -->
<fieldset id="services">
<div class="row">
<div class="col-md-12">
<strong>Special Services:</strong>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="packtrips" type="checkbox" name="packtrips" data-bind="checked: activeFilters">Pack Trips</label>
</div>
<div class="checkbox">
<label>
<input value="horserides" type="checkbox" name="horserides" data-bind="checked: activeFilters">Horse Rides</label>
</div>
<div class="checkbox">
<label>
<input value="cattledrives" type="checkbox" name="cattledrives" data-bind="checked: activeFilters">Cattle Drives</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="horserental" type="checkbox" name="horserental" data-bind="checked: activeFilters">Horse Rental</label>
</div>
<div class="checkbox">
<label>
<input value="guideschools" type="checkbox" name="guideschools" data-bind="checked: activeFilters">Guide Schools</label>
</div>
<div class="checkbox">
<label>
<input value="overnighttrips" type="checkbox" name="overnighttrips" data-bind="checked: activeFilters">Overnight Trips</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Winter -->
<fieldset id="winter">
<p><strong>Winter:</strong>
</p>
<div class="checkbox">
<label>
<input value="sleighrides" type="checkbox" name="sleighrides" data-bind="checked: activeFilters">Sleigh Rides</label>
</div>
<div class="checkbox">
<label>
<input value="snowmobiletours" type="checkbox" name="snowmobiletours" data-bind="checked: activeFilters">SnowMobile Tours/Rental</label>
</div>
<div class="checkbox">
<label>
<input value="skiing" type="checkbox" name="skiing" data-bind="checked: activeFilters">Skiing</label>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Operating Area -->
<fieldset id="operating-area">
<p><strong>Operating Area</strong>
</p>
<div class="checkbox">
<label>
<input value="blm" type="checkbox" name="blm" data-bind="checked: activeFilters">BLM</label>
</div>
<div class="checkbox">
<label>
<input value="nationalforest" type="checkbox" name="nationalforest" data-bind="checked: activeFilters">National Forest</label>
</div>
<div class="checkbox">
<label>
<input value="privateland" type="checkbox" name="privateland" data-bind="checked: activeFilters">Private Land</label>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Other -->
<fieldset id="other">
<p><strong>Other</strong>
</p>
<div class="checkbox">
<label>
<input value="ranchingforwildlife" type="checkbox" name="ranchingforwildlife" data-bind="checked: activeFilters">Ranching for Wildlife</label>
</div>
<div class="checkbox">
<label>
<input value="workingcattleranch" type="checkbox" name="workingcattleranch" data-bind="checked: activeFilters">Working Cattle Ranch</label>
</div>
</fieldset>
</div>
</div>
</form>