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>
Related
In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
In the example below, I'm trying to show a specific div only when i check the radio button "yes".
It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.
How can I fold/unfold each container separately?
https://jsfiddle.net/vsf7mph8/3/
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
$('.otherRowinput').toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.
For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.
You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total:
$(this).closest(".row").find(".otherRowinput").toggle('fast');
Below is your updated example.
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
$('.form-radio input:nth-child(2)').val() == $(this).val()){
$(this).closest(".row").find(".otherRowinput").toggle('fast');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
I have a form with multiple fields, some of which only show when a certain selection is made, that is easy enough to do but where I am struggling is when I have common fields which much show on different selections.
I now I can make duplicate fields with unique classes or id's but that feels like the wrong way to do it. Any help will be greatly appreciated and if this has been asked before I am genuinely sorry, I did search with no luck.
Example code as follows:
$('#order_type').on('change', function() {
if ($(this).val() === "plates_stepped") {
$(".stepped").show("slow");
} else {
$("#plate_qty").val(0);
$("#plate_thickness").val(0);
$("#plate_wrong_reading").val(0);
$("#plate_right_reading").val(0);
$(".stepped").hide("slow");
};
if ($(this).val() === "plates_not_stepped") {
$(".not_stepped").show("slow");
$(".common_plates").show("slow");
} else {
$(".not_stepped").val(0);
$(".not_stepped").hide("slow");
$(".common_plates").hide("slow");
};
<div class="form-group row">
<label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label>
<div class="col-9">
<select class="form-control" id="order_type" required>
<option value="0">Please select...</option>
<option value="plates_stepped">Direct - Plates (I have stepped)</option>
<option value="plates_not_stepped">Direct - Plates (Step for me)</option>
<option value="plates_remake">Direct - Plates Remake</option>
<option value="proof_only">Proof Only</option>
<option value="acme_traditional">Acme Traditional</option>
</select>
</div>
</div>
<div class="form-group row stepped common_plates" style="display: none;">
<label for="plate_qty" class="col-3 col-form-label">Total Plates To Make</label>
<div class="col-9">
<input class="form-control" type="number" placeholder="4" id="plate_qty" required>
</div>
</div>
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;">
<label class="col-3 col-form-label">Plates Thickness?</label>
<div class="radio custom-radio form-check-inline col-9">
<input checked="checked" name="plate_thickness" value="1" type="radio" id="45th">
<label for="45th">1.14mm - 45th.</label>
<input name="plate_thickness" value="2" type="radio" id="67th">
<label for="67th">1.70mm - 67th.</label>
</div>
</div>
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;">
<label class="col-3 col-form-label">Mirror Plates?</label>
<div class="radio custom-radio form-check-inline col-9">
<input checked="checked" name="plate_reading" value="1" type="radio" id="plate_right_reading">
<label for="plate_right_reading">Right reading</label>
<input name="plate_reading" value="2" type="radio" id="plate_wrong_reading">
<label for="plate_wrong_reading">Wrong Reading</label>
</div>
</div>
<div class="form-group row not_stepped" style="display: none;">
<label for="teeth_qty" class="col-3 col-form-label">Teeth quantity</label>
<div class="col-9">
<input class="form-control" type="number" placeholder="92" id="teeth_qty" required>
</div>
</div>
<div class="row form-group radio-field is-required not_stepped" style="display: none;">
<label class="col-3 col-form-label">Gear Type</label>
<div class="radio custom-radio form-check-inline col-9">
<input checked="checked" name="gear_type" value="1" type="radio" id="1_8cp">
<label for="1_8cp">1/8CP</label>
<input name="gear_type" value="2" type="radio" id="31dp">
<label for="31dp">32 DP</label>
</div>
</div>
This is a pseudo code that might help you. So assign a common class to each of your div. I have assigned plates-option as a common class.
Now, each of this div should also have a class name, same as the option values (check the HTML). Once, you do this things, it becomes easier to show/hide the div's based on the value selected from the drop-down.
$('#order_type').change(function() {
$("div.plates-options").hide();
$("div." + $(this).val()).show();
});
$(document).ready(function() {
$('#order_type').trigger('change');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
<label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label>
<div class="col-9">
<select class="form-control" id="order_type" required>
<option value="0">Please select...</option>
<option value="plates_stepped">Direct - Plates (I have stepped)</option>
<option value="plates_not_stepped">Direct - Plates (Step for me)</option>
<option value="plates_remake">Direct - Plates Remake</option>
<option value="proof_only">Proof Only</option>
<option value="acme_traditional">Acme Traditional</option>
</select>
</div>
</div>
<div class="form-group plates-options row plates_stepped common_plates">
plates_stepped & common plates
</div>
<div class="form-group plates-options row plates_not_stepped common_plates">
plates_not_stepped & common plates
</div>
<div class="form-group plates-options row plates_remake">
plates_remake
</div>
<div class="form-group plates-options row proof_only">
proof_only
</div>
<div class="form-group plates-options row acme_traditional common_plates">
acme_traditional & common plates
</div>
Below code can help you and need to change condition as per requirement:
$('#order_type').change(function() {
if ($(this).val() == "plates_stepped") {
$(".not_stepped").val(0);
$(".not_stepped").hide("slow");
$(".common_plates").hide("slow");
$(".stepped").show("slow");
} else if ($(this).val() === "plates_not_stepped") {
$("#plate_qty").val(0);
$("#plate_thickness").val(0);
$("#plate_wrong_reading").val(0);
$("#plate_right_reading").val(0);
$(".stepped").hide("slow");
$(".not_stepped").show("slow");
$(".common_plates").show("slow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
<label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label>
<div class="col-9">
<select class="form-control" id="order_type" required>
<option value="0">Please select...</option>
<option value="plates_stepped">Direct - Plates (I have stepped)</option>
<option value="plates_not_stepped">Direct - Plates (Step for me)</option>
<option value="plates_remake">Direct - Plates Remake</option>
<option value="proof_only">Proof Only</option>
<option value="acme_traditional">Acme Traditional</option>
</select>
</div>
</div>
<div class="form-group row stepped common_plates" style="display: none;">
<label for="plate_qty" class="col-3 col-form-label">Total Plates To Make</label>
<div class="col-9">
<input class="form-control" type="number" placeholder="4" id="plate_qty" required>
</div>
</div>
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;">
<label class="col-3 col-form-label">Plates Thickness?</label>
<div class="radio custom-radio form-check-inline col-9">
<input checked="checked" name="plate_thickness" value="1" type="radio" id="45th">
<label for="45th">1.14mm - 45th.</label>
<input name="plate_thickness" value="2" type="radio" id="67th">
<label for="67th">1.70mm - 67th.</label>
</div>
</div>
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;">
<label class="col-3 col-form-label">Mirror Plates?</label>
<div class="radio custom-radio form-check-inline col-9">
<input checked="checked" name="plate_reading" value="1" type="radio" id="plate_right_reading">
<label for="plate_right_reading">Right reading</label>
<input name="plate_reading" value="2" type="radio" id="plate_wrong_reading">
<label for="plate_wrong_reading">Wrong Reading</label>
</div>
</div>
<div class="form-group row not_stepped" style="display: none;">
<label for="teeth_qty" class="col-3 col-form-label">Teeth quantity</label>
<div class="col-9">
<input class="form-control" type="number" placeholder="92" id="teeth_qty" required>
</div>
</div>
<div class="row form-group radio-field is-required not_stepped" style="display: none;">
<label class="col-3 col-form-label">Gear Type</label>
<div class="radio custom-radio form-check-inline col-9">
<input checked="checked" name="gear_type" value="1" type="radio" id="1_8cp">
<label for="1_8cp">1/8CP</label>
<input name="gear_type" value="2" type="radio" id="31dp">
<label for="31dp">32 DP</label>
</div>
</div>
I know this question has been asked and I've tried a few different methods but can't seem to get this to work. I'm trying to insert a div to extend a form based on a checkbox being ticked. Nothing seems to work at the moment. It's probably something stupid, I'd appreciate the assistance:
https://jsfiddle.net/4ydybrdd/#&togetherjs=qG3ypyIQsa
html:
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-
top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off"
name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"
name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown"
style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block"
name="register">Register</button>
</form>
js:
jQuery("#blogger").click(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
Post the js code after document.ready and don't forget to add jquery link
Updated fiddle
/*!
* can yo u solve my issue? :) I don't understand why it won't wor
*/
$(document).ready(function(){
jQuery("#blogger").change(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off" name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown" style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block" name="register">Register</button>
</form>
looking at your example it seems that your were missing the jquery library as well as some html changes
you have user .addblog class name in two divs.so when you click on check box both divs get show and hide.so remove any one class or use different class name for new div to be inserted..
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
}