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>
Related
Message sending form, the customer has to select at least one of the alternatives (mail, SMS).
Send button would be disabled if none is selected and activate if one or both selected
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", "disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The issue is because your current logic does not deal with checkboxes being re-checked.
You can solve the problem by inverting the logic so that the disabled property is updated on every checkbox change, and is determined by the length of the checked boxes:
var $checkboxes = $('.form-check-input').change(function() {
$('#send').prop('disabled', function() {
return $checkboxes.filter(':checked').length == 0;
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can do it like this:
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
This will disable the button if none of the checkbox are checked.
Demo
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">
E-post
</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">
SMS
</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
You never enable the button again. There is just a disable instruction.
I would disable it by default at beginning and then enable it if any of the checkboxes is checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").attr("disabled", "disabled");
$(this).each(function() {
if ($(this).is(':checked')) {
$("#send").removeAttr("disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$('.form-check-input').change(function() {
let hasChecked = false;
$('.form-check-input').each(function() {
if ($(this).is(':checked')) {
hasChecked = true;
}
});
$("#send").attr("disabled", !hasChecked);
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Correct your logic. Once disabled you are not enabling again when checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", true);
}else{
$("#send").attr("disabled", false);
}
});
});
});
Blockquote
I have 3 Icheck control, if any of those is Toggled, will call one function event?, is that possible?
<div class="checkbox">
<label>
<input class="i-check" type="checkbox" id="IsZero" name="IsZero" />0
<span class="pull-right"></span>
</label>
</div>
<div class="checkbox">
<label>
<input class="i-check" type="checkbox" id="IsOne" name="IsOne" />1
<span class="pull-right"></span>
</label>
</div>
<div class="checkbox">
<label>
<input class=" i-check" type="checkbox" id="IsTwo" name="IsTwo" />2+
<span class="pull-right"></span>
</label>
</div>
That function event was for sorting:
so if one is checked, then it will display values with one only, eg. if 1 or 2 is checked will display 1's and 2's.
i tried below code:
$('input:checkbox.i-check')
$('input.i-check').on('ifToggled'), function(event) {
}
but this doesn't trigger them., is there other way?
Here is how you can do this. Instead of console.log, you can call your function:
$('input.i-check').on('click', function(){
if ( $(this).is(':checked') ) {
console.log('Checked');
}
else {
console.log('Unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label>
<input class="i-check" type="checkbox" id="IsZero" name="IsZero" />0
<span class="pull-right"></span>
</label>
</div>
<div class="checkbox">
<label>
<input class="i-check" type="checkbox" id="IsOne" name="IsOne" />1
<span class="pull-right"></span>
</label>
</div>
<div class="checkbox">
<label>
<input class=" i-check" type="checkbox" id="IsTwo" name="IsTwo" />2+
<span class="pull-right"></span>
</label>
</div>
I have a list of grouped radio buttons, each radio button in a group has an attribute name like this : page-x-layout where x is variable.
My html code looks something like this:
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
So what I want to do is to check if a radio button is checked in each of those groups.
How can I do that ?
You could map all inputs from rows to array and then use every to check if each row has checked input.
$('input').change(function() {
var check = $('.row').map(function(e) {
return $(this).find('input[type="radio"]').is(':checked')
}).get()
console.log(check.every(e => e == true))
})
.row {
border: 1px solid black;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
Try this hope it helps!
$('#element').click(function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); }
});
if (!$("input[name='html_elements']:checked").val()) {
alert('Nothing is checked!');
}
else {
alert('One of the radio buttons is checked!');
}
Using JQuery to check if no radio button in a group has been checked
You can use the onchange event to and get the current input ID and value by using $(this)
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
or if you need all values on load use .each() to get all
$( document ).ready(function() {
$allradio = '';
$('[type~="radio"]').each(function() {
$allradio = $allradio + "ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val()+'\n';
});
alert($allradio);
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
You can use this code for each Radiobutton:
if(document.getElementById('page-x-layout').checked) {
//do something if radio button is checked
}
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");
}
});
how to get checkbox value in array format like [{abc:[1,2,3]}]
now i am getting like [{abc[]:1,abc[]:2,abc[]:3}]...
for getting serializedarray i am using var form = $('.wpc_contact').serializeArray();
here this is my html form which is get generating dynamic (i am using drag and drop for creating dynamic form)
<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend>
<div id="alert-message" class="alert hidden" style="color: red;"></div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls" name="wpc_chkbox" req="yes">
<label class="checkbox">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
</label>
<label class="checkbox">
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</label>
</div>
<p class="help-blocksp" style="display:none;">wpc_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls" name="wpc_inline_chkbox" req="yes">
<label class="checkbox inline">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</label>
</div>
<p class="help-block" style="display:none;">wpc_inline_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>
To create an array use this -
var arr = $("input[name='checkboxname[]']:checked").map(function() {
return this.value;
}).get();
Alernate Solution :
<input type="checkbox" class="selector" value="{value}"/> //add as many as you wan't
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));