Check if radio button in a group has been checked

Check if radio button in a group has been checked - javascript

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
}

Related

disable radio input passed time button

I want to disable todays passed time.
For example:
if time 11:00 and 11:15 are passed then these button are not suppose to
be clickable.
Times input buttons are as follow:
11:00 11:15 11:30 11:45
12:00 12:15 12:30 12:45
13:00 13:15 13:30 13:45
19:00 19:15 19:30 19:45
20:00 20:15 20:30 20:45
21:00 21:15 21:30 21:45
I think I need to improve this check to disabled the input time buttons.
if ( c_hour >= o_hour && ( (c_minutes >= 15 ) ) ) {
option.prop('disabled', true);
Note:
o_hour - clicked button hour
o_minutes - clicked button minute
My function
function updateTimeWindow(type) {
let today = new Date();
let c_hour = today.getUTCHours();
let c_minutes = today.getUTCMinutes();
let next_hour = c_hour;
// $('#time_selector option').each(function () {
$("input[name='time_selector']").each(function () {
var option = $(this);
var o_hour = $(this).attr('data-hour');
var o_minutes = $(this).attr('data-minute');
let current_element_id = option.attr('id')
if (type == 1) { // today
// disable passed time.
// if (o_hour <= c_hour || (o_hour <= next_hour && o_minutes <= c_minutes)) {
if ( c_hour >= o_hour && ( (c_minutes >= 15 ) ) ) {
option.prop('disabled', true);
$('label[class="'+current_element_id+'"]').addClass('no-drop');
}
} else if (type == 2) { // tommorrow.
// enable all time.
option.prop('disabled', false);
$('label[class="' + current_element_id + ' no-drop"]').attr('class', current_element_id);
}
});
}
Time input radio are having following times
html
<div class="tab" style="display: block;">
<div class="row new-rcb ">
<div class="col-md-12 mb-2">
<h5>Time</h5>
</div>
<div class="col-12 text-center mb-2">
<h3>Midday</h3>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt1" name="time_selector" value="11:00" data-hour="11" data-minute="00" disabled="">
<label class="tt1 no-drop" for="tt1" style="justify-content: center;">11:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt2" name="time_selector" value="11:15" data-hour="11" data-minute="15" disabled="">
<label class="tt2 no-drop" for="tt2" style="justify-content: center;">11:15 </label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt3" name="time_selector" value="11:30" data-hour="11" data-minute="30" disabled="">
<label class="tt3 no-drop" for="tt3" style="justify-content: center;">11:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt4" name="time_selector" value="11:45" data-hour="11" data-minute="45" disabled="">
<label class="tt4 no-drop" for="tt4" style="justify-content: center;">11:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt5" name="time_selector" value="12:00" data-hour="12" data-minute="00" disabled="">
<label class="tt5 no-drop" for="tt5" style="justify-content: center;">12:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt6" name="time_selector" value="12:15" data-hour="12" data-minute="15" disabled="">
<label class="tt6 no-drop" for="tt6" style="justify-content: center;">12:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt7" name="time_selector" value="12:30" data-hour="12" data-minute="30" disabled="">
<label class="tt7 no-drop" for="tt7" style="justify-content: center;">12:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt8" name="time_selector" value="12:45" data-hour="12" data-minute="45" disabled="">
<label class="tt8 no-drop" for="tt8" style="justify-content: center;">12:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt9" name="time_selector" value="13:00" data-hour="13" data-minute="00" disabled="">
<label class="tt9 no-drop" for="tt9" style="justify-content: center;">13:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt10" name="time_selector" value="13:15" data-hour="13" data-minute="15" disabled="">
<label class="tt10 no-drop" for="tt10" style="justify-content: center;">13:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt11" name="time_selector" value="13:30" data-hour="13" data-minute="30" disabled="">
<label class="tt11 no-drop" for="tt11" style="justify-content: center;">13:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt12" name="time_selector" value="13:45" data-hour="13" data-minute="45">
<label class="tt12" for="tt12" style="justify-content: center;">13:45</label>
</div>
</div>
</div>
<div class="row new-rcb ">
<div class="col-12 text-center mb-2 mt-2">
<h3>Evening</h3>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t21" name="time_selector" value="19:00" data-hour="19" data-minute="00">
<label class="t21" for="t21" style="justify-content: center;">19:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t22" name="time_selector" value="19:15" data-hour="19" data-minute="15">
<label class="t22" for="t22" style="justify-content: center;">19:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t23" name="time_selector" value="19:30" data-hour="19" data-minute="30">
<label class="t23" for="t23" style="justify-content: center;">19:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t24" name="time_selector" value="19:45" data-hour="19" data-minute="45">
<label class="t24" for="t24" style="justify-content: center;">19:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t25" name="time_selector" value="20:00" data-hour="20" data-minute="00">
<label class="t25" for="t25" style="justify-content: center;">20:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t26" name="time_selector" value="20:15" data-hour="20" data-minute="15">
<label class="t26" for="t26" style="justify-content: center;">20:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t27" name="time_selector" value="20:30" data-hour="20" data-minute="30">
<label class="t27" for="t27" style="justify-content: center;">20:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t28" name="time_selector" value="20:45" data-hour="20" data-minute="45">
<label class="t28" for="t28" style="justify-content: center;">20:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t29" name="time_selector" value="21:00" data-hour="21" data-minute="00">
<label class="t29" for="t29" style="justify-content: center;">21:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t210" name="time_selector" value="21:15" data-hour="21" data-minute="15">
<label class="t210" for="t210" style="justify-content: center;">21:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t211" name="time_selector" value="21:30" data-hour="21" data-minute="30">
<label class="t211" for="t211" style="justify-content: center;">21:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t212" name="time_selector" value="21:45" data-hour="21" data-minute="45">
<label class="t212" for="t212" style="justify-content: center;">21:45</label>
</div>
</div>
</div>
</div>

The hardest part is to simplify ...
const
myform = document.querySelector('#my-form')
, timSelects_Rbuttons = document.querySelectorAll('input[name="time_selector"]')
;
updateTimeWindow(1)
function updateTimeWindow(type)
{
let today = new Date();
let c_HourMinut = (today.getUTCHours() * 60) + today.getUTCMinutes();
if (type===2) c_HourMinut = -1 // tommorrow case ??
if (myform.time_selector.value) // clear radio button time_selector selection
document.querySelector('input[name="time_selector"]:checked').checked = false;
timSelects_Rbuttons.forEach( rButton =>
{
let
[o_hour, o_minutes ] = rButton.value.split(':').map(Number)
, o_HourMinut = (o_hour *60 ) + o_minutes
, timOff = (o_HourMinut < c_HourMinut)
;
rButton.disabled = timOff
rButton.closest('label').classList.toggle('no-drop',timOff)
})
}
// testing part
myform.onsubmit = e =>
{
e.preventDefault() // disable submit for testing
console.clear()
console.log('myform.time_selector.value =', myform.time_selector.value )
}
.no-drop { color : orange }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<form id="my-form">
<div class="tab">
<div class="row new-rcb ">
<div class="col-md-12 mb-2">
<h5>Time</h5>
</div>
<div class="col-12 text-center mb-2">
<h3>Midday</h3>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:00"> 11:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:15"> 11:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:30"> 11:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:45"> 11:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:00"> 12:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:15"> 12:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:30"> 12:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:45"> 12:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:00"> 13:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:15"> 13:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:30"> 13:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:45"> 13:45 </label>
</div>
</div>
<div class="row new-rcb ">
<div class="col-12 text-center mb-2 mt-2">
<h3>Evening</h3>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:00"> 19:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:15"> 19:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:30"> 19:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:45"> 19:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:00"> 20:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:15"> 20:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:30"> 20:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:45"> 20:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:00"> 21:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:15"> 21:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:30"> 21:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:45"> 21:45 </label>
</div>
</div>
</div>
<br><br><br><br><button type="submit"> get Selected (for testing) </button>
</form>

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

ng-if and select ng-change

I created a view for angular+coffee and detected bug:
If category is selected, subcategory is not working.
When I remove ng-if it works.
Code:
<div class="form-group">
<div class="row-fluid"><label><input type="radio" ng-model="banner.visibility" value="0" /> any</label></div>
<div class="row-fluid"><label><input type="radio" ng-model="banner.visibility" value="1" /> always</label></div>
<div class="row-fluid"><label><input type="radio" ng-model="banner.visibility" value="2" /> aftering</label></div>
<div class="row-fluid"><label><input type="radio" ng-model="banner.visibility" value="3" /> category</label></div>
<div class="row-fluid" ng-if="banner.visibility==3">
<div class="col-md-6">
<label class="control-label">category:</label>
<div>
<select
class="form-control"
ng-options="category.title for category in categories"
ng-model="currentCategory"
ng-change="shopBannerCtrl.loadSubcategories()"
></select>
</div>
</div>
<div class="col-md-6">
<label class="control-label">Subcategory:</label>
<div>
<select class="form-control" ng-options="subcategory.title for subcategory in subcategories" ng-model="currentSubcategory"></select>
</div>
</div>
</div>
</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>

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.

Check if radio button in a group has been checked - javascript

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 this code for each Radiobutton: if(document.getElementById('page-x-layout').checked) { //do something if radio button is checked }

Related

disable radio input passed time button

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

ng-if and select ng-change

Multiple fields single model update in knockoutjs

How to get checkbox value through serializedarray()

Categories

Resources