This code tries to get the value of the value attribute in the checked radio button in each radio group. but can't get it to work. Thanks
let doc = {};
$('.radio-group').each(function () {
doc.id = $(this).attr('_id');
$(this).children.each(function () {
let validName = $($(this):checked).attr('value');
doc.checkedName = validName;
}
})
<div class='radio-group' _id='abc'>
<label class='radio-item'>
<input class='radio-icon' value='value 1' name='g' type='radio'></input>
<span class='radio-label'>choose me </span>
</label>
<label class='radio-item'>
<input class='radio-icon' value='value 2' name='g' type='radio'></input>
<span class='radio-label'>choose me </span>
</label>
</div>
Using $(".radio-group input:checked") you can select every checked input that is child of .radio-group.
$(".radio-group input").click(function(){
var doc = [];
$(".radio-group input:checked").each(function(index) {
var id = $(this).closest(".radio-group").attr('_id');
doc.push(id);
});
console.log(doc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-group" _id="id1">
<input type="radio" />
<label>Item 1</label>
</div>
<div class="radio-group" _id="id2">
<input type="radio" />
<label>Item 2</label>
</div>
<div class="radio-group" _id="id3">
<input type="radio" />
<label>Item 3</label>
</div>
<div class="radio-group" _id="id4">
<input type="radio" />
<label>Item 4</label>
</div>
Related
I have a series of dynamically generated div that each one has 4 radio buttons inside:
$(".wrapper").on("custom", ".item", function(){
$.each($(".item"),function(){
// Get all radio names and check if at least one is checked
var radio_groups = [];
$.each($(this).find('input[type="radio"]'), function(){
var myname= this.name;
if($.inArray( myname, radio_groups ) < 0){
radio_groups.push(myname);
}
});
console.log(radio_groups);
return false;
// Check if there is a radio selected for each radio group
for(var i=0; i<radio_groups.length; i++) {
if($(this).find('input[type="radio"][name="' + radio_groups[i] + '"]:checked').length <= 0) {
// $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.row').append('<p class="input-error">Please select one option.</p>');
$('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.condition').append('<p class="input-error">Please select one option.</p>');
errors = true;
}
}
})
})
$('.item').trigger("custom");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
</div>
I have tried this but doesn't seem to work, mostly the problem is that the .item divs are dynamically generated with php.
I probably didn't understand the problem but why not just use querySelectorAll with a simple forEach like that:
let result = [];
document.querySelectorAll('.item').forEach((el) =>{
const radioboxname = el.querySelectorAll('input[type="radio"]')[0].name;
if(!result.includes(radioboxname)){
result.push(radioboxname);
}
});
console.log(result);
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
</div>
<div class="item">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
</div>
<div class="item">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
</div>
</div>
After comment by OP
I add an array and instead of select all radios i select all item divs and check the name of first radio button compare with array and include if wasn't include
There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later
In a form there are 2 group of radio buttons.
In the first group named Result, there are 4 option: id="ok", id="fa", id="fp", id="bp".
In the second group named ResultCategories, there are 9 option: id="cat1" .... id="cat9".
What I want:
a. If ok is clicked, ResultCategories will be unchecked (if already checked).
b. If fp or bp is clicked, cat9 of ResultCategories will be checked.
c. If one of the cat1 to cat8 of ResultCategories is clicked, fa of Result will be checked.
d. When radio buttons are clicked page will refresh and checked radio buttons remain checked.
I got a to c working but d is not working. It retains checked radio for only one group.
Here is what tried:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="POST">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Quality Check</legend>
<div style="float: right;">
<button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button>
</div>
<br />
<br />
<br />
<div class="row">
<div class="column">
<div id="Result">
<label>Result:</label>
<label class="radioContainer">Ok
<input type="radio" name="Result" id ="ok" value="1" />
<span class="circle"></span>
</label>
<label class="radioContainer">Fasle Alarm
<input type="radio" name="Result" id="fa" value="2" />
<span class="circle"></span>
</label>
<label class="radioContainer">False Pass
<input type="radio" name="Result" id="fp" value="3" />
<span class="circle"></span>
</label>
<label class="radioContainer">Blatant Pass
<input type="radio" name="Result" id="bp" value="4" />
<span class="circle"></span>
</label>
</div>
</div>
<br />
<div class="column">
<div id="ResultCategories">
<label>Result Categories:</label>
<div>
<label class="radioContainer">Cat 1
<input type="radio" name="ResultCategories" id="cat1" value="1" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 2
<input type="radio" name="ResultCategories" id="cat2" value="2" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 3
<input type="radio" name="ResultCategories" id="cat3" value="3" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 4
<input type="radio" name="ResultCategories" id="cat4" value="4" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 5
<input type="radio" name="ResultCategories" id="cat5" value="5" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 6
<input type="radio" name="ResultCategories" id="cat6" value="6" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 7
<input type="radio" name="ResultCategories" id="cat7" value="7" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 8
<input type="radio" name="ResultCategories" id="cat8" value="8" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 9
<input type="radio" name="ResultCategories" id="cat9" value="9" />
<span class="circle"></span>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
<script> $('input:radio').click(function() {
location.reload(); }); </script>
I have added a fiddle here: Fiddle
$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});
$(document).ready(function(){
if(localStorage.selected) {
$('#' + localStorage.selected ).attr('checked', true);
}
$('.radio').click(function(){
localStorage.setItem("selected", this.id);
});
});
How can I retain both group of radio buttons checked?
Updated Code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});
$(document).ready(function(){
//get the selected radios from storage, or create a new empty object
var radioGroups = JSON.parse(localStorage.getItem('selected') || '{}');
//loop over the ids we previously selected and select them again
Object.values(radioGroups).forEach(function(radioId){
document.getElementById(radioId).checked = true;
});
//handle the click of each radio
$('.radio').on('click', function(){
//set the id in the object based on the radio group name
//the name lets us segregate the values and easily replace
//previously selected radios in the same group
radioGroups[this.name] = this.id;
//finally store the updated object in storage for later use
localStorage.setItem("selected", JSON.stringify(radioGroups));
});
});
</script>
</head>
<body>
<div class="container">
<form action="" method="POST">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Quality Check</legend>
<div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div>
<br /> <br /> <br />
<div class="row">
<div class="column">
<div id="Result">
<label>Result:</label>
<label class="radioContainer">Ok
<input class="radio" type="radio" name="Result" id ="ok" value="1">
<span class="circle"></span>
</label>
<label class="radioContainer">Fasle Alarm <input class="radio" type="radio" name="Result" id="fa" value="2">
<span class="circle"></span>
</label>
<label class="radioContainer">False Pass <input class="radio" type="radio" name="Result" id="fp" value="3" >
<span class="circle"></span>
</label>
<label class="radioContainer">Blatant Pass <input class="radio" type="radio" name="Result" id="bp" value="4">
<span class="circle"></span>
</label>
</div>
</div>
<br />
<div class="column">
<div id="ResultCategories"><label>Result Categories:</label>
<div>
<label class="radioContainer">Cat 1 <input class="radio" type="radio" name="ResultCategories" id="cat1" value="1">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 2 <input class="radio" type="radio" name="ResultCategories" id="cat2" value="2">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 3 <input class="radio" type="radio" name="ResultCategories" id="cat3" value="3">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 4 <input class="radio" type="radio" name="ResultCategories" id="cat4" value="4">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 5 <input class="radio" type="radio" name="ResultCategories" id="cat5" value="5">
<span class="circle"></span>
</label> <label class="radioContainer">Cat 6 <input class="radio" type="radio" name="ResultCategories" id="cat6" value="6">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 7 <input class="radio" type="radio" name="ResultCategories" id="cat7" value="7">
<span class="circle"></span>
</label> <label class="radioContainer">Cat 8 <input class="radio" type="radio" name="ResultCategories" id="cat8" value="8">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 9 <input class="radio" type="radio" name="ResultCategories" id="cat9" value="9">
<span class="circle"></span>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
<script>
$('input:radio').click(function() {
location.reload();
});
</script>
$(document).ready(function(){
//get the selected radios from storage, or create a new empty object
var radioGroups = JSON.parse(localStorage.getItem('selected') || '{}');
//loop over the ids we previously selected and select them again
Object.values(radioGroups).forEach(function(radioId){
document.getElementById(radioId).checked = true;
});
//handle the click of each radio
$('.radio').on('click', function(){
//set the id in the object based on the radio group name
//the name lets us segregate the values and easily replace
//previously selected radios in the same group
radioGroups[this.name] = this.id;
//finally store the updated object in storage for later use
localStorage.setItem("selected", JSON.stringify(radioGroups));
});
});
I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
I have HTML that looks like this:
<div class="form-group">
<div class="input-group">
<label for="daterange-vacancy" class="input-group-addon">Van</label>
<input type="text" id="daterange-vacancy" class="form-control" name="daterange-vacancy" placeholder="dd/mm/yyyy" data-class="daterangepicker" required="required" />
<label for="daterange-vacancy" class="input-group-addon">
<span class="fa fa-calendar"></span>
</label>
</div>
</div>
<div class="form-group">
<input class="custom-radio" type="radio" id="temp" name="time" value="1" checked="checked" required/><label for="temp" class="bold-sm">Bepaalde dag(en)</label><br/>
<input class="custom-radio" type="radio" id="project" name="time" value="2" required/><label for="project" class="bold-sm">Bepaalde periode</label><br/>
<input class="custom-radio" type="radio" id="struct" name="time" value="3" required/><label for="struct" class="bold-sm">Terugkerend</label>
</div>
<div class="form-group">
<div class="input-checkbox text-left">
<input class="form-checkbox" type="checkbox" id="other" name="other" />
<label for="other">Af te spreken</label>
</div>
</div>
This creates a calendar, 3 radio buttons and a checkbox.
The calendar and 3 radio buttons should be looked at as one, they have to be filled in together or the validation should not let it pass to the next step.
The only exception is when the checkbox is checked. This will disable the calendar and the radiobuttons (and remove the validation on them). Upon unchecking the checkbox again, I want the calendar and the radiobuttons to be required again.
My javascript looks like this:
var other = document.getElementById('other');
if (other) {
other.onchange = function () {
document.getElementById('daterange-vacancy').value = "";
document.getElementById('daterange-vacancy').disabled = this.checked;
$('input[name=other]').change(function(){
if($(this).is(':checked')) {
$('input[name=time]').attr('checked',false);
}
});
}
}
The problem is that the radiobuttons do not uncheck when checking the checkbox. And it does not remove the validation on it.
Here might be a start. And for your own sanity, comment the heck out of your code. It'll help with debugging.
// Create my references
var other = document.getElementById('other');
var vanEl = document.getElementById("daterange-vacancy");
var timeBtnEls = document.getElementsByName("time");
// This will handle the checkbox
if (other) {
other.addEventListener("click", handleOtherClick)
}
// and this will handle all the radio buttons
for (var i = 0; i<timeBtnEls.length; i++) {
timeBtnEls[i].addEventListener("click", handleTimeClick);
}
function handleOtherClick(evt){
// if the box is checked, set the text el to
// disabled.
vanEl.disabled = other.checked;
// set the check status of all radio els to
// the OPPOSITE of the checkbox. End result?
// either NO buttons selected (if the check box
// is selected), or the LAST radio selected (if
// the checkbox is de-selected).
for (var i = 0; i<timeBtnEls.length; i++){
timeBtnEls[i].checked = !other.checked;
}
}
function handleTimeClick(evt){
// The following line will set the checked
// to the OPPOSITE of the currently-clicked
// radio button. I could have simply set it to
// false, but this also works.
other.checked = !evt.target.checked;
// and we re-enabled the text box.
vanEl.disabled = false;
}
<div class="form-group">
<div class="input-group">
<label for="daterange-vacancy" class="input-group-addon">Van</label>
<input type="text" id="daterange-vacancy" class="form-control" name="daterange-vacancy" placeholder="dd/mm/yyyy" data-class="daterangepicker" required="required" />
<label for="daterange-vacancy" class="input-group-addon">
<span class="fa fa-calendar"></span>
</label>
</div>
</div>
<div class="form-group">
<input class="custom-radio" type="radio" id="temp" name="time" value="1" checked="checked" required/>
<label for="temp" class="bold-sm">Bepaalde dag(en)</label>
<br/>
<input class="custom-radio" type="radio" id="project" name="time" value="2" required/>
<label for="project" class="bold-sm">Bepaalde periode</label>
<br/>
<input class="custom-radio" type="radio" id="struct" name="time" value="3" required/>
<label for="struct" class="bold-sm">Terugkerend</label>
</div>
<div class="form-group">
<div class="input-checkbox text-left">
<input class="form-checkbox" type="checkbox" id="other" name="other" />
<label for="other">Af te spreken</label>
</div>
</div>