3 Icheck Control for one event function

3 Icheck Control for one event function - javascript

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>

Related

How to select all nested input siblings in Jquery onclick first element

I need to Checks all input those are inside labels on click "check-all" class. I have tried by nextAll() method but it's not working. kindly help
$('.check-all').click(function() {
alert('asdasd');
$(this).nextAll('input').prop('checked', 'true');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-check-group">
<a><img src="img/select_all.png" class="check-all" /></a>
<label class="switch">
<input type="checkbox" class="myinput" />
<span class="slider">Ankit</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Mohal</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Kamal</span>
</label>
</div>
<div class="toggle-check-group">
<a><img src="img/select_all.png" class="check-all" /></a>
<label class="switch">
<input type="checkbox" class="myinput" />
<span class="slider">Ankit</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Mohal</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Kamal</span>
</label>
</div>

you can :
use closest method to get closest parent of check-all with class
toggle-check-group
use find method to get all input child of toggle-check-group
if you want to check/uncheck all check bow with the .check-all elements
an idea can be to store the checked state of the first check box and apply it to all sibling ones
var isCheck = inputs.first().prop('checked');
$('.check-all').click(function() {
var inputs = $(this).closest('.toggle-check-group').find('input');
var isCheck = inputs.first().prop('checked');
inputs.prop('checked', !isCheck);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-check-group">
<a><img src="img/select_all.png" class="check-all" /></a>
<label class="switch">
<input type="checkbox" class="myinput" />
<span class="slider">Ankit</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Mohal</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Kamal</span>
</label>
</div>
<div class="toggle-check-group">
<a><img src="img/select_all.png" class="check-all" /></a>
<label class="switch">
<input type="checkbox" class="myinput" />
<span class="slider">Ankit</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Mohal</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Kamal</span>
</label>
</div>

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>

Make Text Bolder By selecting radio button

I m new to jquery,I am supposed to do the simple task.If i click on the radio button means the text along with that radio button has to be bolded.please help me with this one.My HTML Markup is here
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label>
<input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label>
<input type="radio" name="optradio">
</label>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
And my jquery code is here
$(document).ready(function(e) {
$(".radio label input").click(function() {
$('.radio').each(function(event) {
if ($(this).hasClass('active')) {
$(this).css("font-family", "helveticabold");
$('.radio').removeClass('active');
if ($(this).next().hasClass('radio'))
$(this).next().addClass('active');
else
$('.radio:last-child').addClass('active');
return false;
}
});
});
});
I know it needs small changes in code please help me out guys

You don't need to use each as only one radio can be selected.
This will do:
Javascript:
$('.radio').on('click', function() {
$('.bold').removeClass('bold');
$(this).addClass('bold');
});
CSS:
.bold {
font-weight: 800;
}
Demo: https://jsfiddle.net/tusharj/3zzaLre0/

You can use $(this) selector for that
$(document).ready(function(e) {
$("input[type='radio']").click(function() {
$("input[type='radio']").parent().css('font-weight','');
$(this).parent().css('font-weight','bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label><input type="radio" name="optradio"><span>IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label><input type="radio" name="optradio"></label><span>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>

how to show/hide a div on the basis of a checkbox selection in angular js

I have a checkbox and a div on my page.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"
ng-checked="ModelData.Animals == 'A'" />
<div class="form-group" ng-show="ModelData.Animals == 'A'">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="Y" />
Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="N" />
No
</label>
</div>
</div>
I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.

Have you tried it this way? Here's the fiddle It works great.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
</label>
</div>
</div>

I think you are looking for ng-true-value and ng-false-value
<div ng-app>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>
</div>
<div ng-show="check == 'A'">
Checked
</div>
</div>
Fiddle

<body ng-app>
<label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
<label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
<label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/>
Show when checked:
<div ng-if="Wolf">
<span> This is removed when the wolf is checked.
</span>
</div>
<div ng-if="Tiger">
<span> This is removed when the tiger is checked.
</span>
</div>
<div ng-if="Lion">
<span> This is removed when the lion is checked.
</span>
</div>
</body>

Input type checkbox return true false in ng-model so i just use this. Its working
<div ng-app>
<div >
<input type="checkbox" ng-model="check"/>
</div>
<div ng-show="check == true">
Checked
</div>

How to get checkbox value through serializedarray()

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));

Develop Reference

JavaScript is the programming language of the Web.

3 Icheck Control for one event function - javascript

Related

How to select all nested input siblings in Jquery onclick first element

Multiple fields single model update in knockoutjs

Make Text Bolder By selecting radio button

how to show/hide a div on the basis of a checkbox selection in angular js

How to get checkbox value through serializedarray()

Categories

Resources