How to get multiple nested values using JavaScript or jQuery? - javascript

On submitting a button I want to get the values of multiple checkboxes where each checkbox have radio buttons. I expect the output will be like if I check
checkbox One and select its corresponding radio button L, checkbox Two and select its corresponding radio button M, checkbox Three and select its corresponding radio button C and it is not mandatory to check all the checkboxes, one may leave some checkbox empty. I want to get the selected item and its corresponding values only.
var allCheckedItem = [];
$.each(jQuery("input[name='teeth']:checked"),
function(){ allCheckedItem.push($(this).val());
});
for (var i = 0; i < allCheckedItem.length; i++)
{
var eachItem = allCheckedItem[i];
console.log(eachItem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" />One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" />M
<input name='a' type="radio" id="rb2" value="L" />L
<input name='a' type="radio" id="rb3" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" />M
<input name='b' type="radio" id="rb5" value="L" />L
<input name='b' type="radio" id="rb6" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" />M
<input name='c' type="radio" id="rb8" value="L" />L
<input name='c' type="radio" id="rb9" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" />M
<input name='d' type="radio" id="rb11" value="L" />L
<input name='d' type="radio" id="rb12" value="C" />C
</span>
</li>
<li><input type="submit" name="submit" value="SAVE"></li>
</ul>
</form>
I expect the output should be: One -> M , Two -> C , Three -> L

Here is another variation on the theme:
const getvals=()=>{var coll={};
$(':radio:checked')
.each((i,rb)=>
$(rb).closest('li')
.find(':checkbox:checked')
.each((j,cb)=>coll[cb.value]=rb.value)
)
console.log(coll);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" />One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" />M
<input name='a' type="radio" id="rb2" value="L" />L
<input name='a' type="radio" id="rb3" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" />M
<input name='b' type="radio" id="rb5" value="L" />L
<input name='b' type="radio" id="rb6" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" />M
<input name='c' type="radio" id="rb8" value="L" />L
<input name='c' type="radio" id="rb9" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" />M
<input name='d' type="radio" id="rb11" value="L" />L
<input name='d' type="radio" id="rb12" value="C" />C
</span>
</li>
<li><input type="button" onclick="getvals()" value="SAVE"></li>
</ul>
</form>

Highly Recommended Reading: Decoupling Your HTML, CSS, and JavaScript.
One of the biggest problems you'll run into, is example code that only works with the current html. If you decide to change that html in just about any way, your code stops working (aka software brittleness). The following code extensible (meaning adding more checkboxes/radios will be easy to add, probably requiring no code changes), and should be easy to understand. Removing li or adding more html won't cause this code to stop working because it doesn't rely on html structure.
$(document).ready(function() {
$('.js-save').on('click', function(e) {
var $btn = $(e.currentTarget);
var $form = $btn.closest('form');
var $pre = $('.debug');
$pre.text('');
$form.find('input:not(".ignore-value")').each(function(_,input) {
var $input = $(input);
var value = $input.val();
if ($input.is('[type=checkbox]')) {
value = $input.prop('checked');
}
var name = $input.prop('name');
$pre.append('name: ' + name + ':' + value + '\n');
if ($input.hasClass('js-associate-value') && value) {
var associatedValue = $($input.data('target')).val();
if (associatedValue) {
$pre.append(' - ' + associatedValue + '\n');
}
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" class="js-associate-value" data-target="input[name=d]:checked"/>One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" class="ignore-value"/>M
<input name='a' type="radio" id="rb2" value="L" class="ignore-value"/>L
<input name='a' type="radio" id="rb3" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two" class="js-associate-value" data-target="input[name=d]:checked"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" class="ignore-value"/>M
<input name='b' type="radio" id="rb5" value="L" class="ignore-value"/>L
<input name='b' type="radio" id="rb6" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three" class="js-associate-value" data-target="input[name=c]:checked"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" class="ignore-value"/>M
<input name='c' type="radio" id="rb8" value="L" class="ignore-value"/>L
<input name='c' type="radio" id="rb9" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four" class="js-associate-value" data-target="input[name=d]:checked"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" class="ignore-value" />M
<input name='d' type="radio" id="rb11" value="L" class="ignore-value" />L
<input name='d' type="radio" id="rb12" value="C" class="ignore-value" />C
</span>
</li>
<li><input class="js-save" type="button" name="submit" value="SAVE"></li>
</ul>
</form>
<pre class='debug'></pre>

Related

Adding values of checked radio boxes in javaScript?

I am new to javaScript and am confused on how I should get the total from the checked radio boxes. Also I am trying to add a submit button for the user, so that the total will only be revealed after they click submit. I feel as though I may not be parsing the values properly?
Appreciate the help
Thanks!
<html>
<head>
<script>
function calculateTotal() {
var score = 0;
q1 = new Array(1,2,3,4,5);
q2 = new Array(1,2,3,4,5);
q3 = new Array(1,2,3,4,5);
q4 = new Array(1,2,3,4,5);
q5 = new Array(1,2,3,4,5);
for (var i = 0; i < q1.length; i++ ) {
if(q1[i].checked){
score += parseFloat(q1[i].value);
}
for(var c = 0; c < q2.length; c++){
if(q2[i].checked){
score += parseFloat(q2[i].value);
}
for(var c = 0; c < q3.length; c++){
if(q3[i].checked){
score += parseFloat(q3[i].value);
}
for(var c = 0; c < q4.length; c++){
if(q4[i].checked){
score += parseFloat(q4[i].value);
}
for(var c = 0; c < q5.length; c++){
if(q5[i].checked){
score += parseFloat(q5[i].value);
}
}
}
}
}
}
}
</script>
</head>
<p class="question">1. Rate your family life?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">1</label>
<br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">2</label>
<br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">3</label>
<br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">4</label>
<br/>
<input type="radio" name="q1" value="e" id="q1e"><label for="q1e">5</label>
<br/>
</ul>
<p class="question">2. Rate your romantic life?</p>
<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">1</label>
<br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">2</label>
<br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">3</label>
<br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">4</label>
<br/>
<input type="radio" name="q2" value="e" id="q2e"><label for="q2e">5</label>
<br/>
</ul>
<p class="question">3. Rate your social life?</p>
<ul class="answers">
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">1</label>
<br/>
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">2</label>
<br/>
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">3</label>
<br/>
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">4</label>
<br/>
<input type="radio" name="q3" value="e" id="q3e"><label for="q3e">5</label>
<br/>
</ul>
<p class="question">4. Rate your career/academic life?</p>
<ul class="answers">
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">1</label>
<br/>
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">2</label>
<br/>
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">3</label>
<br/>
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">4</label>
<br/>
<input type="radio" name="q4" value="e" id="q4e"><label for="q4e">5</label>
<br/>
</ul>
<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to
energetic 5)?</p>
<ul class="answers">
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a">1</label>
<br/>
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b">2</label>
<br/>
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c">3</label>
<br/>
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d">4</label>
<br/>
<input type="radio" name="q5" value="d" id="q5e"><label for="q5e">5</label>
<br/>
</ul>
<script>
alert("Your overall score is " + calculateTotal());
</script>
What you want to do is to get your checkboxes as arrays, not create some unrelated arrays yourself. That can be done using document.getElementsByName("q1");
function calculateTotal() {
var score = 0;
q1 = document.getElementsByName("q1");
q2 = document.getElementsByName("q2");
q3 = document.getElementsByName("q3");
q4 = document.getElementsByName("q4");
q5 = document.getElementsByName("q5");
for (var i = 0; i < q1.length; i++ ) {
if(q1[i].checked){
score += parseFloat(q1[i].value);
}
for(var c = 0; c < q2.length; c++){
if(q2[i].checked){
score += parseFloat(q2[i].value);
}
for(var c = 0; c < q3.length; c++){
if(q3[i].checked){
score += parseFloat(q3[i].value);
}
for(var c = 0; c < q4.length; c++){
if(q4[i].checked){
score += parseFloat(q4[i].value);
}
for(var c = 0; c < q5.length; c++){
if(q5[i].checked){
score += parseFloat(q5[i].value);
}
}
}
}
}
}
}
EDIT: Oh, and for the button to calculate the checked values by the user, you can do really easy something like:
<div onClick="calculateTotal();"> Calculate total </div>
You add a button, attach an event handler to that button, and calculate the total
document.getElementById('total').addEventListener('click', calculateTotal);
function calculateTotal() {
var els = document.querySelectorAll('input[type=radio][name^=q]:checked');
var val = [].map.call(els, function(el) {
return "abcde".split('').indexOf(el.value) + 1;
});
var tot = val.reduce(function(a, b) {
return a + b
});
alert(tot);
}
<p class="question">1. Rate your family life?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">1</label>
<br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">2</label>
<br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">3</label>
<br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">4</label>
<br/>
<input type="radio" name="q1" value="e" id="q1e"><label for="q1e">5</label>
<br/>
</ul>
<p class="question">2. Rate your romantic life?</p>
<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">1</label>
<br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">2</label>
<br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">3</label>
<br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">4</label>
<br/>
<input type="radio" name="q2" value="e" id="q2e"><label for="q2e">5</label>
<br/>
</ul>
<p class="question">3. Rate your social life?</p>
<ul class="answers">
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">1</label>
<br/>
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">2</label>
<br/>
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">3</label>
<br/>
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">4</label>
<br/>
<input type="radio" name="q3" value="e" id="q3e"><label for="q3e">5</label>
<br/>
</ul>
<p class="question">4. Rate your career/academic life?</p>
<ul class="answers">
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">1</label>
<br/>
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">2</label>
<br/>
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">3</label>
<br/>
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">4</label>
<br/>
<input type="radio" name="q4" value="e" id="q4e"><label for="q4e">5</label>
<br/>
</ul>
<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to energetic 5)?</p>
<ul class="answers">
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a">1</label>
<br/>
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b">2</label>
<br/>
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c">3</label>
<br/>
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d">4</label>
<br/>
<input type="radio" name="q5" value="d" id="q5e"><label for="q5e">5</label>
<br/>
</ul>
<button id="total">Total</button>
Here is a working example. You will want to change the value="" to the value you want to add. the document.getElementsByNames("").value will get this value. Also your for loops are all nested which you don't want to do.
You can add a button with an onclick method to call the method you want. since all the values have the same length you can get away with just one for loop. You also probably want to add a tag for your html body.
function calculateTotal() {
var score = 0;
q1 = document.getElementsByName("q1");
q2 = document.getElementsByName("q2");
q3 = document.getElementsByName("q3");
q4 = document.getElementsByName("q4");
q5 = document.getElementsByName("q5");
for (var i = 0; i < q1.length; i++) {
if (q1[i].checked) {
score += parseFloat(q1[i].value);
}
if (q2[i].checked) {
score += parseFloat(q2[i].value);
}
if (q3[i].checked) {
score += parseFloat(q3[i].value);
}
if (q4[i].checked) {
score += parseFloat(q4[i].value);
}
if (q5[i].checked) {
score += parseFloat(q5[i].value);
}
}
return score;
}
Here is what one of the radio buttons should look like.
1. Rate your family life?
<ul class="answers">
<input type="radio" name="q1" value="1" id="q1a"><label for="q1a">1</label>
<br/>
<input type="radio" name="q1" value="2" id="q1b"><label for="q1b">2</label>
<br/>
<input type="radio" name="q1" value="3" id="q1c"><label for="q1c">3</label>
<br/>
<input type="radio" name="q1" value="4" id="q1d"><label for="q1d">4</label>
<br/>
<input type="radio" name="q1" value="5" id="q1e"><label for="q1e">5</label>
<br/>
</ul>
<p class="question">2. Rate your romantic life?</p>
<ul class="answers">
<input type="radio" name="q2" value="1" id="q2a"><label for="q2a">1</label>
<br/>
<input type="radio" name="q2" value="2" id="q2b"><label for="q2b">2</label>
<br/>
<input type="radio" name="q2" value="3" id="q2c"><label for="q2c">3</label>
<br/>
<input type="radio" name="q2" value="4" id="q2d"><label for="q2d">4</label>
<br/>
<input type="radio" name="q2" value="5" id="q2e"><label for="q2e">5</label>
<br/>
</ul>
<p class="question">3. Rate your social life?</p>
<ul class="answers">
<input type="radio" name="q3" value="1" id="q3a"><label for="q3a">1</label>
<br/>
<input type="radio" name="q3" value="2" id="q3b"><label for="q3b">2</label>
<br/>
<input type="radio" name="q3" value="3" id="q3c"><label for="q3c">3</label>
<br/>
<input type="radio" name="q3" value="4" id="q3d"><label for="q3d">4</label>
<br/>
<input type="radio" name="q3" value="5" id="q3e"><label for="q3e">5</label>
<br/>
</ul>
<p class="question">4. Rate your career/academic life?</p>
<ul class="answers">
<input type="radio" name="q4" value="1" id="q4a"><label for="q4a">1</label>
<br/>
<input type="radio" name="q4" value="2" id="q4b"><label for="q4b">2</label>
<br/>
<input type="radio" name="q4" value="3" id="q4c"><label for="q4c">3</label>
<br/>
<input type="radio" name="q4" value="4" id="q4d"><label for="q4d">4</label>
<br/>
<input type="radio" name="q4" value="5" id="q4e"><label for="q4e">5</label>
<br/>
</ul>
<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to energetic 5)?</p>
<ul class="answers">
<input type="radio" name="q5" value="1" id="q5a"><label for="q5a">1</label>
<br/>
<input type="radio" name="q5" value="2" id="q5b"><label for="q5b">2</label>
<br/>
<input type="radio" name="q5" value="3" id="q5c"><label for="q5c">3</label>
<br/>
<input type="radio" name="q5" value="4" id="q5d"><label for="q5d">4</label>
<br/>
<input type="radio" name="q5" value="5" id="q5e"><label for="q5e">5</label>
<br/>
</ul>
<button type="submit" onclick="alert(calculateTotal())">Submit</button>
The main reason your provided code didn't work was because you forgot to return the calculated score from your function:
function calculateScore() {
// your code...
return score;
}
You also need to make sure each of your loops is closed, with a curly brace, before starting the next one.
However, the most readable way to get the value of a group of radio boxes is to use a form element like so:
function calculateScore() {
var formElement = document.getElementById("the-form"),
score = 0;
score += parseInt(formElement.q1.value);
score += parseInt(formElement.q2.value);
return score;
}
function displayScore() {
document.getElementById("the-score").innerText = calculateScore();
}
<form id="the-form">
<input type="radio" name="q1" value=1 id="q1-a1"><label for="q1-a1">1</label>
<input type="radio" name="q1" value=2 id="q1-a2"><label for="q1-a2">2</label>
<input type="radio" name="q1" value=3 id="q1-a3"><label for="q1-a3">3</label>
<input type="radio" name="q1" value=4 id="q1-a4"><label for="q1-a4">4</label>
<input type="radio" name="q1" value=5 id="q1-a5"><label for="q1-a5">5</label>
<br>
<br>
<input type="radio" name="q2" value=1 id="q2-a1"><label for="q2-a1">1</label>
<input type="radio" name="q2" value=2 id="q2-a2"><label for="q2-a2">2</label>
<input type="radio" name="q2" value=3 id="q2-a3"><label for="q2-a3">3</label>
<input type="radio" name="q2" value=4 id="q2-a4"><label for="q2-a4">4</label>
<input type="radio" name="q2" value=5 id="q2-a5"><label for="q2-a5">5</label>
</form>
<button onclick="displayScore()">Calculate Score</button>
<br>
<output id="the-score"></output>
The form element contains properties named after the name tags of each of the inputs within the form and their values can be accessed with the value property.
By changing the values from a..e to 1..5 the code can be simpler.

Getting radio button values for multiple radio button sets

I'm setting up a multiple choice questionnaire with the responses being handling by radio buttons labelled A, B, C and D.
I want to identify the answer to each question by getting the form ID and the clicked button value, so that, for example, a response using the first set of radio buttons might be 1B and the second, 2D and so on (the form ID script is already up and running).
I need this to work on a page with multiple sets of radio buttons
Here is the HTML:
<form class="toeic_pages" id="1">
<label class="item1">
<input type="radio" value="A" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic"/>
<div class="radio-image"></div>
</label>
</form>
...
<form class="toeic_pages" id="2">
<label class="item1">
<input type="radio" value="A" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic"/>
<div class="radio-image"></div>
</label>
</form>
However, while I've been able to get a checked radio button value using this:
jQuery('input[name=toeic]').change(function(){
var invar = jQuery('input[name=toeic]:checked').val();
alert(invar);
});
The script is only effective within the first row of buttons clicked.
To illustrate, if in the first row of buttons to be accessed, button B is clicked then B is displayed (correct).
But, if in another row, button C clicked, B is displayed (incorrect) .. and B continues to be displayed for all subsequent button clicks. I've checked out the SO pages on this but I haven't been able to find a solution - the issue seems to be multiple sets of radio buttons.
Any help would be very much appreciated
You could do something like this :
$(document).ready(function() {
$("#finish").click(function() {
var answersList = [];
//Loop over all questoins
$(".toeic_pages").each(function() {
var questionId = $(this).attr("id");
var answer = $("input[name='toeic']:checked", $(this)).val();
//if Answer isnt provided do not update the answersList
if (answer !== undefined) {
answersList.push({
question: questionId,
answer: answer
});
}
});
console.log(answersList);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="toeic_pages" id="1">
<label class="item1">
<input type="radio" value="A" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic" />
<div class="radio-image"></div>
</label>
</form>
...
<form class="toeic_pages" id="2">
<label class="item1">
<input type="radio" value="A" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic" />
<div class="radio-image"></div>
</label>
</form>
<button id="finish">Get Answers</button>
I think this is exactly what you need.
$('#1 input').on('change', function() {
alert($('#1').attr('id')+$('input[name=radioName]:checked', '#1').val());
});
$('#2 input').on('change', function() {
alert($('#2').attr('id')+$('input[name=radioName]:checked', '#2').val());
});
$('#3 input').on('change', function() {
alert($('#3').attr('id')+$('input[name=radioName]:checked', '#3').val());
});
$('#4 input').on('change', function() {
alert($('#4').attr('id')+$('input[name=radioName]:checked', '#4').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="1">
Question 1
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="2">
Question 2
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="3">
Question 3
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="4">
Question 4
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
Credits to the owner of this answer #Peter J in this question How can I know which radio button is selected via jQuery?

accessing an arrayed name through getelementsbyname

I have a series of elements on a form:
<input type="radio" name="options[0]" value="Mens" />Mens
<input type="radio" name="options[0]" value="Womens" />Womens <hr>
<input type="radio" name="options[1]" value="XL" />XL
<input type="radio" name="options[1]" value="L" />L
<input type="radio" name="options[1]" value="M" />M
<input type="radio" name="options[1]" value="S" />S <hr />
<input type="checkbox" size="16" name="options[2]" value="Printed Name" />Printed Name
How can I access the values of the radio button for my validation routine?
Use querySelectorAll
var radios = document.querySelectorAll('input[type=radio][name^=options]');
[name^=options] matches elements whose name begins with options.
You can then loop over radios.

get selected value of radio button

I am new to Javascript. I have a code snippet like this:
<ul class="dropdown-menu dropdown-menu-right" onchange="onCompChange()">
<div class="radio" id = "compSelect">
<label><input type="radio" name="optradio">op1</label>
</br>
<label><input type="radio" name="optradio">op2</label>
</br>
<label><input type="radio" name="optradio">op3</label>
</div>
</ul>
On selecting a radio button, I want to know which option is selected (op1/op2/op3).
How about this:
<input type="radio" name="opt radio" onclick="check(this.value)" value="op1" >op1</label>
<input type="radio" name="opt radio" onclick="check(this.value)" value="op2" >op2</label>
<input type="radio" name="opt radio" onclick="check(this.value)" value="op3" >op3</label>
in your .js:
function check(value) {
//... use your value
}
<ul class="dropdown-menu dropdown-menu-right" >
<div class="radio" id = "compSelect">
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op1</label>
</br>
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op2</label>
</br>
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op3</label>
</div>
</ul>
<script type = "text/javascript" language = "javascript">
function onCompChange(radio){
var content = radio.parentElement.innerHTML;
var output = content.replace(/<\/?[^>]+(>|$)/g, "");
alert(output);
}
</script>
To get the value of the selected radioName item of a form with id myForm:
$('input[name=radioName]:checked', '#myForm').val()
Here's an example:
$('#myForm input').on('change', function() {
var value = $('input[name=radioName]:checked', '#myForm').val();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
Think this helps you.

Change innerhtml of label when radio button is checked

I want to add innerhtml to my label, when a radio button is checked.
By default the label does not have any value.
I want to change the value of the label based on the value of the radio button.
But I want to define my own value for this.
So the label for value 1 should be: "Label 1"
Label for value 2 should be "Label 2" etc.
I use this for star rating, so when a next radio button is checked, it should remove the value of the previous label.
This is my current html:
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
<label class="full" for="Design-1-5"></label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
<label class="full" for="Design-2-5"></label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
<label class="full" for="Design-3-5"></label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
<label class="full" for="Design-4-5"></label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
<label class="full" for="Design-5-5"></label>
</span>
</li>
</ul>
Try solution acc. to you.
You can combile "Label" as string to rvalue variable.
i.e var rvalue="Label"+$(this).attr('value');
like as:
$('.radio[name="rating[2]"]').change(function(){
var rvalue='';
if($(this).attr('value')=='1')
{
rvalue='Bad';
}
else if($(this).attr('value')=='5')
{
rvalue='Amazing';
}
$(this).parent('.ratingSelector').find('.full').html('');
$(this).next('label').html(rvalue);
});
Working example: http://jsfiddle.net/7wLbyn2c/4/
<input type="radio" onClick="getInnerHtml($(this))">
// call getInnerHtml function in all radio buttons and then write the function
function getInnerHtml(thisVal) {
alert(thisVal.innerHtml());
}
use the below code
<input type="radio" name = 'somename' onclick="getvalue(this)">
<script>
function getvalue(ref) {
alert(ref.value);
}
</script>
We are just passing the reference to this particular radio button as parameter in the onclick event function and then simply use .value attribute used in javascript. You can also use onchange event.
Edited
function getvalue(ref) {
for(i=ref.value;i<=5;i++)
{
$(this).next('label').appned(i);
}
}
Try this
$('input:radio').click(function() {
$('label').text('');
$(this).next('label').html('Label '+$(this).attr('value'));
});
http://jsfiddle.net/nm8ha2p9/1/
Well I did something with pure JS. I hope it helps you. It's on codepen. This are functions I used:
function setValue(obj)
{
if(obj.checked){
clearLabels();
var lbls = document.getElementsByTagName("LABEL");
var lbl = undefined;
for(var i=0;i<lbls.length; i++)
{
if(lbls[i].htmlFor == obj.id)
{
lbl = lbls[i];
break;
}
}
if(lbl != undefined){
lbl.innerHTML = obj.value;
}
}
}
function clearLabels()
{
var lbls = document.getElementsByTagName("LABEL");
for(var i=0;i<lbls.length;i++){
lbls[i].innerHTML="";
}
}
Using pure JS, no jQuery.
Labels are set in your HTML, so you can easily have whatever you want.
Labels use a class to hide them when not wanted.
Uses delegated event listener, listening for click to bubble.
[].forEach.call(document.querySelectorAll('.ratingSelector'), function (node) {
var labels = node.querySelectorAll('.full');
node.addEventListener('click', function (evt) {
var target = evt.target;
if (target.classList.contains('radio')) {
[].forEach.call(labels, function (label) {
label.classList.add('hidden');
});
evt.target.nextElementSibling.classList.remove('hidden');
}
}, false);
});
.hidden {
display:none
}
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full hidden" for="Degelijkheid-1-5">Label 1</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full hidden" for="Degelijkheid-2-5">Label 2</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full hidden" for="Degelijkheid-3-5">Label 3</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full hidden" for="Degelijkheid-4-5">Label 4</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full hidden" for="Degelijkheid-5-5">Label 5</label>
</span>
</li>
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
<label class="full hidden" for="Design-1-5">Label 1</label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
<label class="full hidden" for="Design-2-5">Label 2</label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
<label class="full hidden" for="Design-3-5">Label 3</label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
<label class="full hidden" for="Design-4-5">Label 4</label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
<label class="full hidden" for="Design-5-5">Label 5</label>
</span>
</li>
</ul>

Categories