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>
Related
i have a simple html form where i have like 50 questions, all the questions hasve ther own radio button options, something like below:
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
i want the user to complete all the questions,and only submit after completion, i did something like below:
$(function(){
$("input[type='radio']").change(function(){
$("input[type='submit']").prop("disabled", false);
});
});
<input type="submit" disabled="disabled"/>
however this is not accurate as the submit button enables if a user complete 1 question, can anyone please tell me how to accomplish this, thanks in advance
Make it simple by making one of the radio buttons selected
your code will look like
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11" checked>
<label class="form-check-label" for="flexRadioDefault11">Option 1</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefaultq12">
<label class="form-check-label" for="flexRadioDefaultq12">Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefaultq21" checked>
<label class="form-check-label" for="flexRadioDefaultq21"> Option 1 </label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefaultq22">
<label class="form-check-label" for="flexRadioDefaultq22"> Option 2 </label>
$("#btn").on("click", function (e) {
e.preventDefault;
$(".radio").each(function (index) {
if (!$(this).is(":checked")) {
alert(index + "is uncheck");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<button id="btn">submit</button>
You need tu ose .each() method.
Each radio question should have a unique name so I changed them to q1,q2,q3. Even I added a wrapper for each question block. Whenever a question is answered, I loop each question block and check whether any block still remains unanswered. If any block(question) is unanswered, doEnable variable changes to false and loop break out.
$(function(){
$("input[type='radio']").change(function(){
let doEnable = true;
$(".form-check-input-wrap").each(function(){
if($(this).find("input[type='radio']:checked").length == 0){
doEnable = false;
return false;
}
});
if(doEnable) {
$("input[type='submit']").prop("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="text-danger">1. Question 1</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11">
<label class="form-check-label" for="flexRadioDefault11">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault12">
<label class="form-check-label" for="flexRadioDefault12">
Option 2 </label>
</div>
<h3 class="text-danger">2. Question 2</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefault21">
<label class="form-check-label" for="flexRadioDefault21">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefault22">
<label class="form-check-label" for="flexRadioDefault22">
Option 2 </label>
</div>
<h3 class="text-danger">3. Question 3</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q3" id="flexRadioDefault31">
<label class="form-check-label" for="flexRadioDefault31">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q3" id="flexRadioDefault32">
<label class="form-check-label" for="flexRadioDefault32">
Option 2 </label>
</div>
<input type="submit" disabled="disabled"/>
The following div stacks some images together
<div class='small-6 medium-6 large-6 columns productimage'>
<img src='small/b6k7_fG1.png' name='bf' class='base' />
<img src='small/seat_flex_G1.png' id='seat' name='seat' class='overlay' style='z-index: 1' />
<img src='small/back_ZS.png' id='back' name='back' class='overlay' style='z-index: 2' />
<img src='small/back_support_G1.png' class='overlay' style='z-index: 3' />
</div>
The UI alows the user to change attributes, some of which are linked together, and refresh the image with a given name
One set
<div class="product">
<h6>Arms</h6>
<input type="radio" id="arms_" name="arms" value="_"><label>No Arms</label>
<input type="radio" id="arms_f_" name="arms" value="_f_" checked="checked"><label>S Arms</label>
<input type="radio" id="arms_fa_" name="arms" value="_f_"><label>A Arms</label>
</div>
<div class="product">
<h6>Base and Frame</h6>
<input type="radio" id="b_f[bG1_fG1]" name="b_f" value="bG1_fG1" checked="checked">
<input type="radio" id="b_f[b65_f6KA]" name="b_f" value="b65_f6KA">
<input type="radio" id="b_f[b6K8_fG1]" name="b_f" value="b6K8_fG1">
<input type="radio" id="b_f[b6K8_f6KA]" name="b_f" value="b6K8_f6KA">
<input type="radio" id="b_f[b6KA_fG1]" name="b_f" value="b6K8_fG1">
<input type="radio" id="b_f[b65_fG1]" name="b_f" value="b65_f6KA">
</div>
Second set
<div>
<input type="radio" id="seat_depth_" name="seat_depth" value="_" checked="checked"><label>Fixed </label>
<input type="radio" id="seat_depth_flex_" name="seat_depth" value="_flex_"><label>Flex</label>
</div>
<div>
<label><input type="radio" class='imagepick' id="seat_98" name="seat" value="98" checked="checked"><img src="98.JPG"> </label>
<label><input type="radio" class='imagepick' id="seat_ZK" name="seat" value="ZK"><img src="ZK.JPG"> </label>
<label><input type="radio" class='imagepick' id="seat_ZS" name="seat" value="ZS"><img src="Zs.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_BRN" name="seat" value="BRN"><img src="BRN.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_DTR" name="seat" value="DTR"><img src="DTR.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_97" name="seat" value="97"><img src="97.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_SG" name="seat" value="SG"><img src="sg.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_G1" name="seat" value="G1"><img src="g1.jpg"> </label>
</div>
Independant onclick input
<div>
<label><input type="radio" class='imagepick' id="back_98" name="back" value="98" checked="checked" onclick='document.getElementById("back").src="small/back_98.png"'></label>
<label><input type="radio" class='imagepick' id="back_ZK" name="back" value="ZK" onclick='document.getElementById("back").src="small/back_ZK.png"'></label>
<label><input type="radio" class='imagepick' id="back_ZS" name="back" value="ZS" onclick='document.getElementById("back").src="small/back_ZS.png"'></label>
<label><input type="radio" class='imagepick' id="back_BRN" name="back" value="BRN" onclick='document.getElementById("back").src="small/back_BRN.png"'></label>
<label><input type="radio" class='imagepick' id="back_DTR" name="back" value="DTR" onclick='document.getElementById("back").src="small/back_DTR.png"'></label>
<label><input type="radio" class='imagepick' id="back_97" name="back" value="97" onclick='document.getElementById("back").src="small/back_97.png"'></label>
<label><input type="radio" class='imagepick' id="back_SG" name="back" value="SG" onclick='document.getElementById("back").src="small/back_SG.png"'></label>
<label><input type="radio" class='imagepick' id="back_G1" name="back" value="G1" onclick='document.getElementById("back").src="small/back_G1.png"'></label>
</div>
as long as the interactivity is limited to a single set (+ independant onclick inputs):
$("input[type=radio]").on("change", function() {
var seat_image = $("input[name=seat_depth]:checked").val() + $("input[name=seat]:checked").val();
$("#seat").attr("src", "small/seat" + seat_image + ".png");
})
the javascript fires properly
however, adding radio inputs will fire the above javascript nonetheless and actually serve up a blank.
Wanting to add
$("input[type=radio]").on("change", function() {
var frame_image = $("input[name=arms]:checked").val() + $("input[name=b_f]:checked").val();
$("#bf").attr("src", "small/" + frame_image + ".png");
})
fails as well.
How can the javascript be refactored to fire only with a given input name (as in the first case one of the two name - seat or seat_depth), is clicked, and thus coexist with other firing mechanisms, while allowing independant onclick events to fire?
There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I'm developing an application that display 2 graphs and contain radio buttons to change the time interval.
What i'm trying to do is, for example, if i select monthly in the 2nd set of radio buttons the first set should also have that option check.
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup1">
<label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient"
ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2"
ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' >Weekly</label>
<label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3"
ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup2">
<label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4"
ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5"
ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2" >Weekly</label>
<label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6"
ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
I've tried to checked using the following code in JS:
$scope.SetDay= function(){
document.getElementById("SettingMixRadioButtonsGroup1").child[0].checked = true;
document.getElementById("SettingMixRadioButtonsGroup2").child[0].checked = true;
};
But It won't perform the check on the child element... if i use the parent it works fine but its not a very scalable solution
This creates a handler for the change event for the radio buttons. It selects all radio buttons under panel-radio-buttons which have the same value attribute and sets their checked property to that of the element which triggered the event.
$("input[type=radio][name=radio1]").change(function() {
var val = $(this).attr("value");
var radio = $(".panel-radio-buttons input[type=radio][name=radio1][value=" + val + "]");
radio.prop("checked", $(this).is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup1">
<label class="radio-inline">
<input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()'>Weekly</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup2">
<label class="radio-inline">
<input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2">Weekly</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
n my html page I have got two sections, each independent of the other. When I am selecting Check1 and then check2 the choice2 gets unselected and only choice 4 gets selected. I want both choice 2 and choice 4 to be selected.
HTML
<div id="radio-gp1">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Choice 2</label>
</div>
<div id="radio-gp2">
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
<input type="radio" id="radio4" name="radio" /><label for="radio4">Choice 4</label>
</div>
<button id="check1">Check1</button>
<button id="check2">Check2</button>
JS
$(function() {
$( "#radio-gp1" ).buttonset();
$( "#radio-gp2" ).buttonset();
$('#check1').click(function() {
$('#radio-gp1 input').each(function(){
$(this).attr('checked','checked');
$( "#radio-gp1" ).buttonset('refresh');
});
});
$('#check2').click(function() {
$('#radio-gp2 input').each(function(){
$(this).attr('checked','checked');
$( "#radio-gp2" ).buttonset('refresh');
});
});
});
Not sure where I am going wrong, here's my fiddle http://jsfiddle.net/surysharma/waodj7n5/
You can't select multiple of radios that have the same name attribute. You'll want to name your groups separately.
JSFiddle
<div id="radio-gp1">
<input type="radio" id="radio1" name="radiogp1" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radiogp1"/><label for="radio2">Choice 2</label>
</div>
<div id="radio-gp2">
<input type="radio" id="radio3" name="radiogp2" /><label for="radio3">Choice 3</label>
<input type="radio" id="radio4" name="radiogp2" /><label for="radio4">Choice 4</label>
</div>