I have two radio buttons groups containing three options each and i have added group id's dynamically.
What i wanted is: for each group - radio name must match with its relevant group id name
group1 contains three radio buttons with name attribute group1
group2 contains three radio buttons with name attribute group2
//this script is used to add groupid's
$('.wraper').each(function(i) {
$(this).attr('id', "group" + (i + 1));
});
input[type=radio],
input[type=radio]+div {
display: none;
}
input[type=radio]:checked+div {
display: flex;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wraper">
<div class="col-sm-12">
<label class="checkedClass tabboxfor" for="a">a</label>
<label class="tabboxfor" for="b">b</label>
<label class="tabboxfor" for="c">c</label>
</div>
<div class="col-xs-12">
<input type="radio" id="a" class="" checked="checked" />
<div class="box">
<p>a</p>
</div>
<input type="radio" id="b" class="" />
<div class="box">
<p>a</p>
</div>
<input type="radio" id="c" class="" />
<div class="box">
<p>c</p>
</div>
</div>
</div>
<div class="wraper">
<div class="col-sm-12">
<label class="checkedClass tabboxfor" for="x">x</label>
<label class="tabboxfor" for="y">y</label>
<label class="tabboxfor" for="z">z</label>
</div>
<div class="col-xs-12">
<input type="radio" id="x" class="" checked="checked" />
<div class="box">
<p>xxx</p>
</div>
<input type="radio" id="y" class="" />
<div class="box">
<p>yyy</p>
</div>
<input type="radio" id="z" class="" />
<div class="box">
<p>zzz</p>
</div>
</div>
</div>
Use .find() to target :radio element to set .attr()
$('.wraper').each(function(i) {
var groupId = "group" + (i + 1);
$(this).attr('id', groupId );
$(this).find(':radio').attr('name', groupId);
});
//this script is used to add groupid's
$('.wraper').each(function(i) {
$(this).attr('id', "group" + (i + 1));
$(this).find(':radio').attr('name', this.id)
});
input[type=radio],
input[type=radio]+div {
display: none;
}
input[type=radio]:checked+div {
display: flex;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wraper" id="group1">
<div class="col-sm-12">
<label class="checkedClass tabboxfor" for="a">a</label>
<label class="tabboxfor" for="b">b</label>
<label class="tabboxfor" for="c">c</label>
</div>
<div class="col-xs-12">
<input type="radio" id="a" class="" checked="checked" />
<div class="box">
<p>a</p>
</div>
<input type="radio" id="b" class="" />
<div class="box">
<p>a</p>
</div>
<input type="radio" id="c" class="" />
<div class="box">
<p>c</p>
</div>
</div>
</div>
<div class="wraper" id="group2">
<div class="col-sm-12">
<label class="checkedClass tabboxfor" for="x">x</label>
<label class="tabboxfor" for="y">y</label>
<label class="tabboxfor" for="z">z</label>
</div>
<div class="col-xs-12">
<input type="radio" id="x" class="" checked="checked" />
<div class="box">
<p>xxx</p>
</div>
<input type="radio" id="y" class="" />
<div class="box">
<p>yyy</p>
</div>
<input type="radio" id="z" class="" />
<div class="box">
<p>zzz</p>
</div>
</div>
</div>
As I understand you mean this - you want inputs inside wrapper to follow naming rules.Correct?
$('.wraper').each(function(i) {
var groupId = "group" + (i + 1);
$(this).attr('id', groupId );
$(this).find('input').attr('name', groupId );
});
If my understanding is correct this is what you are expecting :
$('.wraper').each(function(i) {
$(this).attr('id', "group" + (i + 1));
$(this).children("input"). each (function (){
$(this).attr("name","group" + (I+1));
});
});
Related
How do i validate if there is a div that uses display:none
$("input[name$='test']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#test" + test).show();
});
$(".check").click(function(){
var name = $("#name").val();
var add = $("#add").val();
var hobby = $("#hobby").val();
if( name == "" ){
$("#name").css('border', '1px solid red');
return false
} else if ( add == "" ){
$("#add").css('border', '1px solid red')
} else if ( hobby == "" ){
$("#hobby").css('border', '1px solid red')
} else {
alert('success');
return true
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myRadio">
<div class="condition">
<input type="radio" name="test" checked="checked" value="Y" id="first" />
<label for="first">First</label>
</div>
<div class="condition">
<input type="radio" name="test" value="N" id="second" />
<label for="second">Second</label>
</div>
<div class="condition">
<input type="radio" name="test" value="YN" id="third" />
<label for="third">Third</label>
</div>
</div>
<div id="testY" class="desc">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<div id="testN" class="desc" style="display:none">
<label for="add">Add</label>
<input type="text" id="add" />
</div>
<div id="testYN" class="desc" style="display:none">
<label for="hobby">Hobby</label>
<input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>
When I fill in the first content and click validation, it should issue a success alert because my goal is to validate the div is showing.
Any idea?
Thank you
You can find the input need to check by checked radio value first then validate this input:
$("input[name$='test']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#test" + test).show();
});
$(".check").click(function(){
let checked = $("input[name$='test']:checked").val();
let input = $("#test" + checked).find('input');
let val = input.val();
if(!val){
$(input).css('border', '1px solid red');
return false
}
alert('success');
return true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myRadio">
<div class="condition">
<input type="radio" name="test" checked="checked" value="Y" id="first" />
<label for="first">First</label>
</div>
<div class="condition">
<input type="radio" name="test" value="N" id="second" />
<label for="second">Second</label>
</div>
<div class="condition">
<input type="radio" name="test" value="YN" id="third" />
<label for="third">Third</label>
</div>
</div>
<div id="testY" class="desc">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<div id="testN" class="desc" style="display:none">
<label for="add">Add</label>
<input type="text" id="add" />
</div>
<div id="testYN" class="desc" style="display:none">
<label for="hobby">Hobby</label>
<input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>
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>
How to show input with class searchFilter below radio button only when that radio button is checked and hide all the others .searchFilter inputs?
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
No need for javascript for this, you can do this with css:
.searchFilter {
display: none;
/* hide search filters */
}
input[type=radio]:checked~.searchFilter {
display: block;
/* show filters that appear after a checked input */
}
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example1">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example2">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example3">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
Do this way:
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
$('.searchFilter').hide();
$('input[type=radio]:checked').next('.searchFilter:first').show();
});
});
This should do the trick.
$(document).ready(function(){
$('.filter-option').children('input[type=radio]').on('change', function(){
$(this).parents('.details').find('input[type=radio]').each(function(){
$(this).is(':checked') ? $(this).siblings('.searchFilter').show() : $(this).siblings('.searchFilter').hide();
});
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example4" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
Please check my code it might help you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//For first form
//select last radiobutton as default
$("form").find(".searchFilter").attr("disabled",true).val("")
$("form").find(".searchFilter").last().attr("disabled",false)
//On radiobuttion selection change
$('input[type=radio]').on('change',function(){
$("form").find(".searchFilter").attr("disabled",true).val("");
$(this).siblings(".searchFilter").attr("disabled",false)
});
});
</script>
</head>
<body>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form >
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
</body>
</html>
I have been locked in this logic for 2 weeks, I need to do that only the "div" containing the "linha-opcao-resposta" class that has other children with the same class.
In other words.
I need to make the children of the "div" input parent containing "div" children with the same parent class when selected appear and hide the others from the group of radio buttons
Look in the example below.
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
<input type="hidden" title="" id="7329_2338" name="hidden_2338">
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7330_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="0">
<label for="7330_2370" title="">Não</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7331_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="1">
<label for="7331_2370" title="">Sim </label>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7331_2371" title="">27.3.1 Agente 1</label>
<input type="text" title="" id="7331_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_1" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7332_2371" title="">27.3.2 Agente 2</label>
<input type="text" title="" id="7332_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_2" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7333_2371" title="">27.3.3 Agente 3</label>
<input type="text" title="" id="7333_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_3" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7334_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="2">
<label for="7334_2370" title="">Exame não realizado</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7405_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="3">
<label for="7405_2370" title="">Não se aplica</label>
</div>
</div>
</div>
only radio buttons containing children with the same class of "linha-opcao-resposta" should appear, other radio buttons that do not contain, should make those containing children disappear.
I tried to do it this way, but without success.
$('input[type="radio"]').on('change', function () {
var element = $(this);
var pais = element.parent().parent();
var filhos;
var aux = 0;
pais.forEach(pai => {
if (element.val() == aux) {
filhos = pai.children();
if (filhos.length > 1) {
for (var j = 0; j < filhos.length; j++) {
filhos[j].style.display = "block";
}
}
}
else {
filhos = pai.children();
for (var k = 0; k < filhos.length; j++) {
filhos[k].style.display = "none";
}
}
aux++;
});
First set display = 'none' to all radio button's parent. Then set display = 'block' only to the radio button's parents matching the condition. Try the following way:
var radio = document.querySelectorAll('input[type=radio]');
radio.forEach(function(radEl){
radEl.parentElement.style.display = 'none';
});
var radShow = document.querySelectorAll('div.linha-opcao-resposta + div.linha-opcao-resposta > div > input[type=radio]');
radShow.forEach(function(radEl){
radEl.parentElement.style.display = 'block';
});
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<label for="7329_2338" title="">27.3 Presença de agentes específicos na citologia oncótica?</label>
<input type="hidden" title="" id="7329_2338" name="hidden_2338">
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7330_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="0">
<label for="7330_2370" title="">Não</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7331_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="1">
<label for="7331_2370" title="">Sim </label>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7331_2371" title="">27.3.1 Agente 1</label>
<input type="text" title="" id="7331_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_1" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7332_2371" title="">27.3.2 Agente 2</label>
<input type="text" title="" id="7332_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_2" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
<div style="padding-left: 30px; clear: both; " class="linha-opcao-resposta">
<div style="float:left;">
<label for="7333_2371" title="">27.3.3 Agente 3</label>
<input type="text" title="" id="7333_2371" name="text_2371" indicador="CHECKUP_AGEESPCITONC_AGENTE_3" class="rfdRoundedCorners rfdDecorated rfdInputDisabled">
</div>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7334_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="2">
<label for="7334_2370" title="">Exame não realizado</label>
</div>
</div>
<div style="padding-left:30px;clear:both;" class="linha-opcao-resposta">
<div style="float:left;">
<input type="radio" title="" id="7405_2370" name="radio_2370" indicador="CHECKUP_AGEESPCITONC" value="3">
<label for="7405_2370" title="">Não se aplica</label>
</div>
</div>
</div>
I have a list of grouped radio buttons, each radio button in a group has an attribute name like this : page-x-layout where x is variable.
My html code looks something like this:
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
So what I want to do is to check if a radio button is checked in each of those groups.
How can I do that ?
You could map all inputs from rows to array and then use every to check if each row has checked input.
$('input').change(function() {
var check = $('.row').map(function(e) {
return $(this).find('input[type="radio"]').is(':checked')
}).get()
console.log(check.every(e => e == true))
})
.row {
border: 1px solid black;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
Try this hope it helps!
$('#element').click(function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); }
});
if (!$("input[name='html_elements']:checked").val()) {
alert('Nothing is checked!');
}
else {
alert('One of the radio buttons is checked!');
}
Using JQuery to check if no radio button in a group has been checked
You can use the onchange event to and get the current input ID and value by using $(this)
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
or if you need all values on load use .each() to get all
$( document ).ready(function() {
$allradio = '';
$('[type~="radio"]').each(function() {
$allradio = $allradio + "ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val()+'\n';
});
alert($allradio);
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
You can use this code for each Radiobutton:
if(document.getElementById('page-x-layout').checked) {
//do something if radio button is checked
}