I have a group of radio controls in a form. Each one is wrapped in a <label> element for styling.
When the page loads, each label has a background color set on it via CSS.
I want a user to be able to click on any radio button from the group toggling it's parent <label> background color.
From a UX point of view, I need each checked control to have it's parent label background color toggled. I need this throughout the group of radio controls.
<form>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
My approach;
I'm aware one cant select a parent element using CSS so it's off to jQuery.
Using jQuery, I can apply some logic to the entire set of radio buttons like so:
$(':radio').each( function (i, el) {
$(this).on('change', function(){
if($(this).is(':checked')){
$(this).parent().css('background', '#ba9bc9');
}
$(this).on('blur', function(){
$(this).parent().css('background', '#09afed');
});
});
});
This works, however it only works for the current element selected. Clicking away loses focus. I need it to maintain state throughout the entire set of questions. So questions #1 - #3 could all end up with coloured backgrounds potentially.
You can find the radios with the same name, and remove the class from them, before adding the class to the radio that was clicked.
var $radios = $(':radio');
$radios.on('click', function(e){
$radios.filter('[name="'+ e.target.name +'"]').not(e.target).parent().removeClass('selected');
$(e.target).parent().addClass('selected');
});
.selected {
background-color: red; //or whatever
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
If you are able and willing to refacter your code you can do this purely with css:
label {
background: #ccc;
}
[type="radio"]:checked+label {
background: #b00;
}
<form>
<input id="lbl01" type="radio" name="question1">
<label for="lbl01">01</label>
<input id="lbl02" type="radio" name="question1">
<label for="lbl02">02</label>
<input id="lbl03" type="radio" name="question1">
<label for="lbl03">03</label>
<br/>
<input id="lbl04" type="radio" name="question2">
<label for="lbl04">04</label>
<input id="lbl05" type="radio" name="question2">
<label for="lbl05">05</label>
<input id="lbl06" type="radio" name="question2">
<label for="lbl06">06</label>
<br/>
<input id="lbl07" type="radio" name="question3">
<label for="lbl07">07</label>
<input id="lbl08" type="radio" name="question3">
<label for="lbl08">08</label>
<input id="lbl09" type="radio" name="question3">
<label for="lbl09">09</label>
</form>
Related
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
I am trying to create selection when new user is created it will need a group. It is working nicely, but the "checked" option doesn't work for some reason. How can I make the "user" as checked so it would be true if create new user button is pressed?
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" checked> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
<button class="btn-sonera" ng-click="createUser(user, groups)"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
With AngularJs best is use its directive:
ng-checked="variable"
I managed to make it checked with ng-init="groups.group=1" Because I need the value assigned to the radio. Is there something wrong using it this way?
Full code
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" ng-init="groups.group=1"> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
Here is a working plunker: https://plnkr.co/edit/4VtblBSWROLTETW5Ie5C?p=preview
The core code:
$scope.groups = {
admin : false,
user: false,
viewer: false
};
And in the view:
<button class="btn-sonera" ng-click="groups.user=true"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
Note how each ng-model is bound to an object, ie: groups.admin, groups.user etc.
Could you please try by using ng-value
<label>
<input type="radio" ng-model="groups.group" value="1">
Admin
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="2">
User
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="3">
Viewer
</label><br/>
in controller
$scope.createUser = function(user, groups){
groups.group = "2";
};
I've this code:
<form name="quiz" ng-submit="quiz.answer(selected)">
<label>
<input type="radio" ng-model="selected" ng-value="true"> Red
</label>
<br/>
<label>
<input type="radio" ng-model="selected" ng-value="false"> Green
</label>
<br/>
<label>
<input type="radio" ng-model="selected" ng-value="false"> Blue
</label>
<br/>
<label>
<input type="radio" ng-model="selected" ng-value="false"> Yellow
</label>
<br/>
<input type="submit" id="submit" value="Submit" />
</form>
How do I prevent ALL of the false values from being selected at once if I click one?
<form name="quiz" ng-submit="quiz.answer(selected)">
<label>
<input type="radio" ng-model="selected" ng-value="red">
Red
</label><br/>
<label>
<input type="radio" ng-model="selected" ng-value="green">
Green
</label><br/>
<label>
<input type="radio" ng-model="selected" ng-value="blue">
Blue
</label><br/>
<label>
<input type="radio" ng-model="selected" ng-value="yellow">
Yellow
</label><br/>
<input type="submit" id="submit" value="Submit" />
</form>
Give each of the radio buttons a distinct value.
As per my understanding you want to group the radio buttons such that one is selected at a time you can do it by adding name attribute in each radio button and give same name to all of them. So at time of submit you can get the value of selected variable in submit function call.
<form name="quiz" ng-submit="quiz.answer(selected)">
<label>
<input type="radio" name="quizOption" ng-model="selected" ng-value="true">
Red
</label><br/>
<label>
<input type="radio" name="quizOption" ng-model="selected" ng-value="false">
Green
</label><br/>
<label>
<input type="radio" name="quizOption" ng-model="selected" ng-value="false">
Blue
</label><br/>
<label>
<input type="radio" name="quizOption" ng-model="selected" ng-value="false">
Yellow
</label><br/>
<input type="submit" id="submit" value="Submit" />
</form>
I have multiple radio buttons. In the code that i have they are different pictures corresponding with different functions.
The user has to know which radio button is clicked. Therefor i'm trying to find a way to change the background of the radio button after it has been clicked.
In order for the code to work the <label> has to stay arround the <input> tag.
<div class="radio-toolbar">
<label class="BottomLeft">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomLeft" />
</label>
<label class="BottomRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomRight" />
</label>
<label class="Dual">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Dual" />
</label>
<label class="DualRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="DualRight" />
</label>
<label class="Duplex">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Duplex" />
</label>
<label class="Custom">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Custom" />
</label>
</div>
Here's the JSfiddle
You can try this:
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});
Here is the FIDDLE.
Also, you must have unique ID's in html.
To work your labels , your code should look like this.The problem is that , you cannot have same ID for all elements. ID is unique and if you want to work with label , you have to put for="#" attribute in your <label></label> element.So , remember <label></label> goes with for="" attribute , and that for="" attribute works with the id in the <input /> tag.And I've made your radio buttons non-multiple , so remove name="" attribute to work as multiple.
<div class="radio-toolbar">
<label for="first">
Tech<input id="first" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomLeft" />
</label>
<label for="second">
AnotherOne<input id="second" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomRight" />
</label>
<label for="third">
Third<input id="third" type="radio" ng-model="SelectedLayout" name="radioButton" value="Dual" />
</label>
<label for="fourth">
Fourth<input id="fourth" type="radio" ng-model="SelectedLayout" name="radioButton" value="DualRight" />
</label>
<label for="fifth">
Fifth<input id="fifth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Duplex" />
</label>
<label for="sixth">
Sixth<input id="sixth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Custom" />
</label>
</div>
Try this.I have changed backgorund color checked radio button to orange with jquery
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});
Can someone help me, because I'm stuck right now. I have to make a form toggle betweeen two fieldsets using classlist object and queryselector. I have to use a function in Javascript that adds the classlist to the fieldset.
Right now, this is my code in javascript:
var click = document.querySelector('form>fieldset>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
click.addEventListener("click", function() {
if (click === "stage") {
project.classList.toggle(".project");
}
else {
stage.classList.toggle(".stage");
}
});
This is my code in HTML:
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>
And this is my code in CSS:
.project {
display: none;
}
.stage {
display: none;
}
The fieldsets called "Project" and "Stage" have to toggle. So, when I click on the radio button called project, the stage form has to disappear, vice versa.
I can't use onclick, because my teacher don't want me to use that.
You have some problems in your code:
You fogot the start form tag.
project.classList.toggle(".project"); need to be project.classList.toggle("project");
2.1 You can't use toggle classes in this case, because you don't want to toggle, you want to add and remove. You want to show just one section on the same time. right?
You have multiple checkboxes so you need to attach click event to each of them.
var click = document.querySelectorAll('form fieldset:first-child>label>input[type="radio"]');
var project = document.querySelector(".project");
var stage = document.querySelector(".stage");
for (var cl = 0; cl < click.length; cl++) {
click[cl].addEventListener("change", function() {
//if (this.value === "stage") {
project.classList.toggle("show");
project.classList.toggle("hide");
stage.classList.toggle("show");
stage.classList.toggle("hide");
//stage.classList.remove("hide");
//}
//else {
// project.classList.remove("hide");
// stage.classList.add("hide");
//}
});
}
.hide {
display:none;
}
<form>
<fieldset>
<legend>Ik wil mij aanmelden:</legend>
<label>
<input type="radio" name="submit-for" value="project" checked="checked">
<span>Voor een project</span>
</label>
<label>
<input type="radio" name="submit-for" value="stage">
<span>Als stagebedrijf</span>
</label>
</fieldset>
<fieldset id="project" class="project hide">
<legend>Project</legend>
<label>
<span>Titel:</span>
<input type="text" name="project-title">
</label>
<label>
<span>Opdrachtomschrijving:</span>
<textarea name="project-description"></textarea>
</label>
<label>
<span>Doelgroepomschrijving:</span>
<textarea name="project-target-audience"></textarea>
</label>
<label>
<span>Doelstelling/intentie van het project:</span>
<textarea name="project-goal"></textarea>
</label>
<label>
<span>Looptijd:</span>
<input type="text" name="project-duration">
</label>
<label>
<span>Deadline:</span>
<input type="date" name="project-deadline">
</label>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="project-eerstejaars"> Eerstejaars studenten</label>
<label><input type="checkbox" name="project-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="project-derdejaars"> Derdejaars studenten</label>
<label><input type="checkbox" name="project-afstudeer"> Afstudeer studenten</label>
<label><input type="checkbox" name="project-onbekend"> Onbekend</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="project-comments"></textarea>
</label>
</fieldset>
<fieldset id="stage" class="stage">
<legend>Stage</legend>
<fieldset>
<legend>Geschikt voor</legend>
<label><input type="checkbox" name="stage-tweedejaars"> Tweedejaars studenten</label>
<label><input type="checkbox" name="stage-afstudeerders"> Afstudeer studenten</label>
<label><input type="checkbox" name="stage-onbekend"> Onbekend</label>
</fieldset>
<fieldset>
<legend>Hoe lang is de stage</legend>
<label><input type="radio" name="stage-duration" value="10"> 10 weken</label>
<label><input type="radio" name="stage-duration" value="20"> 20 weken</label>
</fieldset>
<label>
<span>Begindatum:</span>
<input type="date" name="stage-startdate">
</label>
<label>
<span>Beschrijving stagewerkzaamheden</span>
<textarea name="stage-description"></textarea>
</label>
<fieldset>
<legend>Beschrijving stagebedrijf</legend>
<label>
<span>Bedrijfsnaam:</span>
<input type="text" name="stage-company-name">
</label>
<label>
<span>Adres:</span>
<input type="text" name="stage-address">
</label>
<label>
<span>Postcode:</span>
<input type="text" name="stage-postal">
</label>
<label>
<span>Plaats:</span>
<input type="text" name="stage-place">
</label>
<label>
<span>Sector:</span>
<input type="text" name="stage-sector">
</label>
<label>
<span>Core business:</span>
<input type="text" name="stage-core-business">
</label>
</fieldset>
<label>
<span>Opmerking:</span>
<textarea name="stage-comments"></textarea>
</label>
</fieldset>
<input type="submit" value="Aanmelden">
</form>