Checkbox event not triggering class toggle on label - javascript

Similar questions on stack overflow but not quite what I need.
So I have a parent div with multiple checkboxes wrapped in labels, I then attached a click event on the parent so it bubbles to every child element. My problem is the class is toggled fine when clicked on the label (it's a class that changes the style of the label), but when I click on the actual little checkbox it does not work since it adds the class to the input and not the label, how would I make it that the class is toggled on the label even if the event. target is on the checkbox input
const requiredForm = document.querySelectorAll('.drinos-required')
const requiredCheckbox = document.querySelector('.required-form-input')
const requiredFunction = function(evt) {
if (!evt.target.classList.contains('drinos-required')) return;
evt.target.classList.toggle('checkerActive')
}
requiredCheckbox.addEventListener('click', requiredFunction)
.checkerActive {
background-color: red;
}
<div class="required-form-input">
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Electrician</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Plumber</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Mason</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Carpenter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Handyman</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Painter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Cleaner</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Lawn Care/Landscaping</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Tree Service</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Pool Service</label>
</div>

You need to map input/label events and not the .required-form-input. Verify all targets clicked with drinos-checkbox-required and valid if is label or checkbox. If checkbox, closest label and set the class.
const requiredForm = document.querySelectorAll('.drinos-required')
const requiredCheckbox = document.querySelector('.required-form-input')
const requiredFunction = function(evt) {
if (evt.target.classList.contains('drinos-checkbox-required')) {
if (evt.target.tagName == 'label')
evt.target.classList.toggle('checkerActive');
else evt.target.closest("label").classList.toggle('checkerActive');
}
}
requiredForm.forEach((el) => el.addEventListener('click', requiredFunction))
.checkerActive {
background-color: red;
}
<div class="required-form-input">
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Electrician</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Plumber</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Mason</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Carpenter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Handyman</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Painter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Cleaner</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Lawn Care/Landscaping</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Tree Service</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Pool Service</label>
</div>

Although I think this might not be the best solution or best practice, it worked. What I did was attach another listener to the label
const requiredForm = document.querySelectorAll('.drinos-required').forEach(curr => {
curr.addEventListener('click', function () {
curr.classList.toggle('checkerActive')
})
})

Related

Get all cheched ckexbox and set it to hiden input

I have 5 html checkboxes, but every time they have different value, I want when everytime when i check or uncheck checkbox to call this js function to get all checked chexbox and add it to hiden input
This is my html
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="1" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="2" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="3" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="4" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="5" onchange="getValue(this.value)">
<input type="hidden" id="ticketsPay" name="ticketsPay" value="">
And this is my js
let myArray = (function() {
let a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
document.getElementById('ticketsPay').value = myArray.toString();
JS dont save in hidden input all checked checkbox any idea?
Here's an example that uses Array.prototype.reduce and accounts only the checked ones:
const EL_inp = document.querySelector("#ticketsPay");
const ELs_ckb = document.querySelectorAll('[name="checkbox"]');
const setChecked = () => {
EL_inp.value = [...ELs_ckb].reduce((a, EL) => {
if (EL.checked) a.push(EL.value);
return a;
}, []);
};
ELs_ckb.forEach(EL => EL.addEventListener("input", setChecked));
<input type="checkbox" class="checkbox" name="checkbox" value="1">
<input type="checkbox" class="checkbox" name="checkbox" value="2">
<input type="checkbox" class="checkbox" name="checkbox" value="3">
<input type="checkbox" class="checkbox" name="checkbox" value="4">
<input type="checkbox" class="checkbox" name="checkbox" value="5">
<input id="ticketsPay" name="ticketsPay" value="" readonly>

How to dynamic check whether checkbox is in another table Javascript/PHP?

I have two tables, table 1 with the fields of webID, project, web, and I use below PHP code(ThinkPHP framework) to get project list:
$project = M('WebProjectList')->where(array('web' => self::$web))->getField('project', true);
table 2 with the fields of userID, issue, web, project and I use below PHP code to get issue list:
$where['web'] = self::$web;
$where['project'] = array('in', $project);
$issue = M('UserIssue')->where($where)->group('issue')->getField('issue',true);
Below code in .js is the multiple-choice/checkbox of both projects and issues that let user choose, when user choose an issue which does not belong to that project, how to reminder user to check again before submitting?
$('.project2').each(function (index) {
var project = result[index].project;
for (var i in project) {
var item = $('input[value="' + project[i] + '"]');
$(this).find(item).attr('checked', 'checked');
}
});
$('.issue2').each(function (index) {
var issue = result[index].issue;
for (var i in issue) {
var item1 = $('input[value="' + issue[i] + '"]');
$(this).find(item1).attr('checked', 'checked');
}
});
And html code as below:
<th>Project</th>
<td>
<div style="width: 800px" class="project2">
<foreach name="projectlist" item="item">
<label style="display: inline-block">
<input type="checkbox" name="project" style="height: 18px;width: 18px" value="{$item}"/>
{$item}
</label>
</foreach>
<input type="checkbox" name="project" style="display: none" value="all" checked>
</div>
</td>
</tr>
<tr>
<th>Issue</th>
<td>
<div style="width: 800px" class="issue2">
<foreach name="issueList" item="item1">
<label style="display: inline-block">
<input type="checkbox" name="issue" style="height: 18px;width: 18px" value="{$item1}"/>
{$item1}
</label>
</foreach>
<input type="checkbox" name="issue" style="display: none" value="all" checked>
</div>
</td>
</tr>
and the actual html from inspect as below:
$('.project2').each(function(index) {
var project = result[index].project;
for (var i in project) {
var item = $('input[value="' + project[i] + '"]');
$(this).find(item).attr('checked', 'checked');
}
});
$('.issue2').each(function(index) {
var issue = result[index].issue;
for (var i in issue) {
var item1 = $('input[value="' + issue[i] + '"]');
$(this).find(item1).attr('checked', 'checked');
}
});
label {
display: inline-block;
}
input[type=checkbox] {
height: 18px;
width: 18px;
}
<table>
<tbody>
<tr>
<th>project</th>
<td>
<div style="width: 800px" class="project2">
<label>
<input type="checkbox" name="project[]" value="crosserver">
crosserver
</label>
<label>
<input type="checkbox" name="project[]" value="dev">
dev
</label>
<label>
<input type="checkbox" name="project[]" value="ceshi">
ceshi
</label>
<label>
<input type="checkbox" name="project[]" value="klfqios">
klfqios
</label>
<label>
<input type="checkbox" name="project[]" value="banshu">
banshu
</label>
<label>
<input type="checkbox" name="project[]" value="tishen">
tishen
</label>
<label>
<input type="checkbox" name="project[]" value="del">
del
</label>
<label>
<input type="checkbox" name="project[]" value="dyb">
dyb
</label>
<label>
<input type="checkbox" name="project[]" value="kuaiwan">
kuaiwan
</label>
<label>
<input type="checkbox" name="project[]" value="ddleios">
ddleios
</label>
<label>
<input type="checkbox" name="project[]" value="ybguios">
ybguios
</label>
<label>
<input type="checkbox" name="project[]" value="lgybios">
lgybios
</label>
<label>
<input type="checkbox" name="project[]" value="leboios">
leboios
</label>
<label>
<input type="checkbox" name="project[]" value="qpcios">
qpcios
</label>
<input type="checkbox" name="project[]" value="all" checked="">
</div>
</td>
</tr>
<tr>
<th>issue</th>
<td>
<div style="width: 800px" class="issue2">
<label>
<input type="checkbox" name="issue[]" value="cjsgios_lg">
cjsgios_lg
</label>
<label>
<input type="checkbox" name="issue[]" value="dev">
dev
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_msg">
dyb_msg
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_msgios">
dyb_msgios
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_testin_android">
dyb_testin_android
</label>
<label>
<input type="checkbox" name="issue[]" value="dyb_wjlgz_android">
dyb_wjlgz_android
</label>
<label>
<input type="checkbox" name="issue[]" value="huixie_banshu">
huixie_banshu
</label>
<label>
<input type="checkbox" name="issue[]" value="kdmsios_jq">
kdmsios_jq
</label>
<label>
<input type="checkbox" name="issue[]" value="kw_msg">
kw_msg
</label>
<label>
<input type="checkbox" name="issue[]" value="unkonwn">
unkonwn
</label>
<label>
<input type="checkbox" name="issue[]" value="wjlgzios_lg">
wjlgzios_lg
</label>
<label>
<input type="checkbox" name="issue[]" value="zgtxios_ll">
zgtxios_ll
</label>
<label>
<input type="checkbox" name="issue[]" value="zqsgios_Runhero">
zqsgios_Runhero
</label>
<label>
<input type="checkbox" name="issue[]" value="{4ff036a1-3254eafe}">
{4ff036a1-3254eafe}
</label>
<input type="checkbox" name="issue[]" value="all" checked="">
</div>
</td>
</tr>
</tbody>
</table>

get the checkbox value to a div html

i want to display all the values of the checked checkbox in a div
here is my code, how can i make it become multiple function?
$('[type="checkbox"]').on('change', function() {
var val = this.checked ? this.value : '';
$('#cs-input').html(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cs-input"></div>
<div id="CS-popup" class="popup-windows ">
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX">GMSC01
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX">GMSC02
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX">VMSC01
<br>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX">VMSC02
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX">GMGW01
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX">GMGW02
<br>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX">VMGW01
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX">VMGW02
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX">SPS01
<br>
<input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX">SPS02
<input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX">HSS01
<input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX">HSS02
<br>
</div>
http://jsfiddle.net/Wy22s/1348/
Your current logic is only reading the value of the last clicked checkbox. Instead you can use map() to build an array of all the checked values, then join() the resulting array together as a string to be displayed, something like this:
$(':checkbox').on('change', function() {
var values = $(':checkbox:checked').map(function() {
return this.value;
}).get().join(', ');
$('#cs-input').html(values);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cs-input"></div>
<div id="CS-popup" class="popup-windows ">
<label>
<input type="checkbox" name="CS" value="GMSC01" data-selector="GMSC01BOX" />GMSC01
</label>
<label>
<input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX" />GMSC02
</label>
<label>
<input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX" />VMSC01
</label><br />
<label>
<input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX" />VMSC02
</label>
<label>
<input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX" />GMGW01
</label>
<label>
<input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX" />GMGW02
</label><br />
<label>
<input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX" />VMGW01
</label>
<label>
<input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX" />VMGW02
</label>
<label>
<input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX" />SPS01
</label><br />
<label>
<input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX" />SPS02
</label>
<label>
<input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX" />HSS01
</label>
<label>
<input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX" />HSS02
</label><br />
</div>
Note the use of the :checkbox selector over [type="checkbox"] and :checked within the handler to retrieve only those which have been chosen.
Also note the addition of label elements to make the hit area of each checkbox include the text next to it.

check all function with outputting labels into a div

i have a group of check boxes and i want to use a check all function but only for the corresponding checkboxes for example if i click checkAll1 it will only highlight checkItem 1 but also will still allow me to check other check boxes.
you will see from the snippet below the code i currently have, i want to also be able to put the checkAll label when it comes out to the #check div to be in a p tag so i can style it.
hope this all makes sense
Many thanks
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use value to call checkbox, Do something like this..
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
var chk5 = $("input[type='checkbox'][value='5']");
var chk6 = $("input[type='checkbox'][value='6']");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
chk4.prop('checked',this.checked);
});
chk5.on('change', function(){
chk6.prop('checked',this.checked);
});
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + "<p></p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1" value="1"><label for="checkAll1" >Check All</label>
<input type="checkbox" id="checkItem1" value="2"> <label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item 2</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item3</label>
<hr />
<input type="checkbox" id="checkAll2" value="3"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3" value="5"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3" value="6"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
I tweak your code a little, and what you mean by able to put the checkAll label when it comes out to the #check div which i did't get it, try this below code :
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
$(".checkAll").click(function() {
if ( $(this).is(':checked') )
$(this).siblings(':checkbox').prop('checked', true);
else
$(this).siblings(':checkbox').prop('checked', false);
});
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll1" class="checkAll">
<label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll2" class="checkAll">
<label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll3" class="checkAll">
<label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item3</label>
</div>
<p>You have selected:</p>
<div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
p/s : like other said, id must be unique for elements
Assign a same class for the same row check boxes
Use the below jquery
$("#checkAll1").change(function(){
$(".checkItem1").prop("checked", true);
});
$("#checkAll2").change(function(){
$(".checkItem2").prop("checked", true);
});
$("#checkAll3").change(function(){
$(".checkItem3").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" class="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" class="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
let me know if it is helpful

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