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>
Related
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>
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
}
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));
});
});
I want validate to check whether all radio buttons are checked and move to next division. There are five radio button groups. When I clicked submit button validate that five radio button groups to check whether clicked or not
HTML FILE:
<div class="RatContent animated slideInRight" id="question1">
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col next">
<button type="submit" class="right">
<i style="color:black;" ng-click="openCity(event, 'question2' , 'question1')" class="ionicons ion-arrow-right-c"></i>
</button>
</div>
</div>
<!-- End content-->
</div>
JS FILE:
$scope.openCity = function(evt, cityName , Currentdiv) {
var i, x;
x = document.getElementsByClassName("RatContent");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var flag=0;
$("#"+Currentdiv).find("input[type='radio']").each(function(){
if($("input[type='radio']").is(':checked') == true ){
flag=1;
return false;
}
});
alert(flag);
if(flag==0){
document.getElementById(cityName).style.display = "block";
}
else{
alert("sfsdf");
}
}
You are using angular js library but not using ng-repeat directive. Create an array which is have radio structure example:
$scope.myArray = [
{
"header" : "First",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
},
{
"header" : "Second",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
}
]
In your html create rows and radios with ng-repeat :
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;" ng-repeat="data in myArray">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>{{data.header}}</h5>
</div>
</div>
</div>
<div class="col" ng-repeat="myRadio in data.radios">
<div class="row">
<div class="col">
<input type="radio" name="emotion" ng.model="myRadio" id="myRadio.id" class="input-hidden" required />
<label for="myRadio.id">
<i class="fa {{myRadio.icon}}"></i>
</label>
</div>
</div>
</div>
</div>
I'm not entirely sure if this is what you had in mind but check it out: http://codepen.io/Knollo/pen/EgXLaW
For the sake of simplicity I've modified your DOM somewhat.
HTML
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o">ok</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<button onclick="validateGroups()">submit</button>
CSS (scss)
.question {
margin: 10px 0;
padding: 20px 0;
border-bottom: 1px solid black;
&__title {
font-weigth: bold;
color: red;
margin: 0 0 10px;
}
}
Javascript
function validateGroups() {
$questions = $('.question');
$answeredQuestions = $questions.filter(checkForValidAnswer);
if ($answeredQuestions.length != $questions.length) {
alert('not all questions have been answered, yet.');
} else {
alert('all questions answered. proceeding...');
}
}
function checkForValidAnswer($index, question) {
// get all answers
$answers = $(question).find('.question__answer');
// try to find a checked answer
$selectedAnswer = $answers.find('input:checked');
// return false if no checked answer was found
if ($selectedAnswer.length < 1)
return false;
// true, otherwise
return true;
}
I have jQuery like this :
jqObj.bind('change', function () {
debugger;
});
jqObj matches two elements (dropDownList), but only the firs of them respond to the 'change' event, the second element that on position [1] do nothing on change.
This is my HTML :
<div id="area-146">
<div class="blockContent">
<div class="form-element duplicate ">
<label for="71">Idioma </label>
<select id="combo-71" style="width: 200px;">
<option value="Russo">Russo</option>
<option value="Sueco">Sueco</option>
</select>
<input id="text-71" value="Escolhe uma opção" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="72">Escrita </label>
<input class="peq" id="72" maxlength="35" name="Input.Fields[72]" size="35" title="" type="text" value="">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="73">Conversação </label>
<input class="peq" id="73" maxlength="35" name="Input.Fields[73]" size="35" title="" type="text" value="">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="85"> </label>
<br>
<br style="clear: left;">
</div>
</div>
<div id="area-146-2"><div class="form-element duplicate ">
<label for="71">Idioma </label>
<select id="combo-71-2" style="width: 200px;">
<option value="Russo">Russo</option>
<option value="Sueco">Sueco</option>
</select>
<input id="text-71-2" value="Escolhe uma opção" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="72">Escrita </label>
<input class="peq" id="72-2" maxlength="35" name="Input.Fields[72]" size="35" title="" type="text" value="">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="73">Conversação </label>
<input class="peq" id="73-2" maxlength="35" name="Input.Fields[73]" size="35" title="" type="text" value="">
<br style="clear: left;">
</div>
<div class="form-element duplicate ">
<label for="85"> </label>
<br>
<br style="clear: left;">
</div>
</div>
jqObj object is the following:
[<select id="combo-71" style="width: 200px;">…</select>, <select id="combo-71-2" style="width: 200px;">…</select>]
I don't know why it respond only for a first element, but not the both of them.
The elements are added dynamically, then I make a new select to match all existing elements in the page. I also cannot use .on() because the version of my jQuery is 1.6 .
Any suggestion?
bind will not bind a listener to an element created dynamically after bind has been called. However, delegate will, you just need to specify an appropriate ancestor:
$('#area-146').delegate('select', 'change', function(){
//glorious code!
});
ref: https://api.jquery.com/delegate/