Hello I need your help to find a way to save my radio input and print it to the screen so I know that it is saved. I have this HTML:
if (document.getElementById('a1').checked) {
rate_value1 = document.getElementById('a1').value;
document.writeln(rate_value1);
}
if (document.getElementById('a2').checked) {
rate_value2 = document.getElementById('a2').value;
document.writeln(rate_value2);
}
if (document.getElementById('a3').checked) {
rate_value3 = document.getElementById('a3').value;
document.writeln(rate_value3);
}
if (document.getElementById('a4').checked) {
rate_value4 = document.getElementById('a4').value;
document.writeln(rate_value4);
}
if (document.getElementById('a5').checked) {
rate_value5 = document.getElementById('a5').value;
document.writeln(rate_value5);
}
<div class='input-form' id="div1">
<h4 id="myText" contenteditable="true">Customize</h4>
<input type="radio" name="rating" value="5" id="a5" ><label for="5">5</label>
<input type="radio" name="rating" value="4" id="a4" ><label for="4">4</label>
<input type="radio" name="rating" value="3" id="a3" ><label for="3">3</label>
<input type="radio" name="rating" value="2" id="a2" ><label for="2">2</label>
<input type="radio" name="rating" value="1" id="a1" ><label for="1">1</label>
</div>
<button type='button' id='but_add' value='Add new'>Add Rating Nums</button>
Thank you for your time
Try creating another element above your <div> and target it whenever you click a radio button.
<p id="details"></p>
<div>
<input type="radio" name="rating" value="5" id="a5" Onclick="display(this.value)" ><label >5</label>
</div>
In your js:
<script>
function display(x){
document.getElementById('details').innerHTML = x;
}
</script>
Related
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>
I need to calculate the value total, which is a product of initial value (let's say 10) and the factors A, B, C and D, which are equal to, let's say 2, 3, 4 and 5.
The combination of factors should be selected by user via checking the corresponding boxes. The problem is that I need to repeat this many times independently in a form and the solution below (for two of these sections) does not separate this process correctly. If these were text values, I would do e.g. var $text = $(".result", $section);
Basically, I do not understand how to relate numerical variable to these sections. Also, it would be great to have this initial value (10) in the Result field even if none of the boxes are checked.
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section");
var total = 10;
$(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$('.result').val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
I assume that you want the rows to be independent:
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section"),
initial = parseInt($section.find('.result').data('initial')),
total = initial;
$section.find("input:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find('.result').val(total === initial ? initial : total);
});
// getting the total values
$(".res_button").click(function() {
var $section = $(this).closest(".section");
var total = $section.find('.result').val();
console.log(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="10" value="10" class="result"></label>
<label><button class="res_button">Result 1 line</button></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="20" value="20" class="result"></label>
<label><button class="res_button">Result 2 line</button></label>
</div>
$(document).ready(function() {
$(".factor-checkbox").click(function() {
var $section= $(this).closest(".section")
var total = 10;
$section.find(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find(".result").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
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.
I have a problem with my web page. I am trying to create a survey with an image and using form submit with several radio button groups. The image changes every 15 secs from img1.jpg to img2.jpg and so on and so forth and the data from the radio buttons are saved in my local database. The problem is when the image is on img2.jpg and when the user clicked submit to save it to database, the image resets to img1.jpg. What should I do so that the image doesn't reset every time on form submit?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
});
</script>
</head>
<body id="page-top">
<header>
<div class="header-content">
<div class="header-content-inner">
<h1><img src="img/img1.jpg" alt="image" style="width:738px;height:444px;"></h1>
<hr>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
</header>
<?php
$con = mysqli_connect("localhost","root","","survey");
# $group1 = ($_POST['group1']);
# $group2 = ($_POST['group2']);
# $group3 = ($_POST['group3']);
# $group4 = ($_POST['group4']);
if(isset($_POST['submit']))
{
mysqli_query($con,"INSERT INTO response (col1,col2,col3,col4)
VALUES ('$group1','$group2','$group3','$group4')");
mysqli_close($con);
}
?>
</body>
</html>
1.Create file called form-request.php with the following code:
<?php
$con = mysqli_connect("localhost","root","","survey");
# $group1 = ($_POST['group1']);
# $group2 = ($_POST['group2']);
# $group3 = ($_POST['group3']);
# $group4 = ($_POST['group4']);
mysqli_query($con,"INSERT INTO response (col1,col2,col3,col4) VALUES ('$group1','$group2','$group3','$group4')");
mysqli_close($con);
?>
2.This should be your index page.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
$('.header-content form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'form-request.php',
data: $('.header-content form').serialize(),
success: function (data) {
console.log(data);
}
});
});
});
</script>
</head>
<body id="page-top">
<header>
<div class="header-content">
<div class="header-content-inner">
<h1><img src="img/img1.jpg" alt="image" style="width:738px;height:444px;"></h1>
<hr>
<form action="home.html" method="post">
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
</header>
</body>
</html>
form-request.php should be in the same directory as index.php. When submitting the form the page will not refresh nothing will happen only the data will be inserted in the MySQL database. If you want something to happen when the form is submitted please provide me an information for it.
You are posting the form. After the post, the page reloads and the initial image is being loaded.
You need a way to pass the name of the current img that you are seeing to the server when submitting the form.
There are multiple ways you can do this. For example, you can do this by passing it to the query string and then check for it.
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>