I am trying to add different class to each radio button previous to the checked one. that said, say if I click on button No3 button No1 should get tclass1 and button No2 should get tclass2...and so on if other button is selected.
here is a sample code
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
here is the script I use
$(document).ready(function(e) {
$("input[type=radio]").click(function(){
//I use these two lines to clear the last class if exists on each radio button before adding scpecific ones but it does not work
var lastClass = $(this).closest("ul").find("li label").attr('class').split(' ').pop();
$(this).closest("ul").find("li label[class*=tclass]").removeClass(lastClass);
//here I add specific classs to each radio
$(this).closest("li").prevAll("li").each(function(i) {
i++;
$(this).find("label").addClass("tclass" + i);
});
});
});
here is the demo
FIDDLE DEMO
as far as I can see the problem is with deleting classes. any help would be much appreciated :(
If I understand your question correctly, the struggle is with adding and removing dynamic class names on a set of elements.
I'd suggest to use the same method when determining the relevant class name for an element, whether you want to remove or add it.
Check out this approach:
$(document).ready(function(e) {
// Takes a selection index, an element, and the element's index
// Removes or adds a classname to the element's label based on
// comparing its own index to the selection's index.
var modifyClass = function(selectedIndex, element, index) {
var needsClass = index < selectedIndex;
$(element)
.next("label")
.toggleClass("tclass" + (index + 1), needsClass);
}
$("input[type=radio]").click(function() {
var radioBtns = $("input[type=radio]");
var checked = radioBtns.index(this);
var btnArray = radioBtns.toArray();
// For each radio button, check if it needs a class (index < selected index)
// and add or remove the right class name
btnArray.forEach(modifyClass.bind(null, checked));
})
});
form {
max-width: 500px;
margin-top: 25px;
}
form ul li {
display: inline-block;
width: 20%;
text-align: center;
vertical-align: top;
float: left;
position: relative
}
input {
position: relative;
top: 0;
left: 50%;
margin-left: -6px;
display: none;
}
input[type=radio]:checked + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: green;
}
input[type=radio] + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: gray;
}
label {
padding-top: 55px;
}
/*this class should be added*/
input[type=radio] + label.tclass1::before {
background-color: yellow;
}
input[type=radio] + label.tclass2::before {
background-color: orange;
}
input[type=radio] + label.tclass3::before {
background-color: red;
}
input[type=radio] + label.tclass4::before {
background-color: blue;
}
input[type=radio] + label.tclass5::before {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label class="test" for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label class="test" for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label class="test" for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label class="test" for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label class="test" for="radio5">five</label>
</li>
</ul>
</form>
Take a look at this,
$(document).ready(function() {
$("input[type=radio]").click(function(){
var counter = 0;
var found = false;
$("input[type=radio]").each(function()
{
counter++;
if(found)
{
$(this).next("label").removeClass("tclass"+counter);
}
else
{
$(this).next("label").toggleClass("tclass"+counter,true);
if($(this).is(':checked'))
{
found = true;
}
}
});
});
});
https://jsfiddle.net/8jct6tfs/14/
I think this is what you want. let me know if something isn't working or isnt what you meant.
Related
I am using star rating widget in one of my HTML forms in my React JS application.
I am referring this widget https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html.
When user clicks rating from one of five star, the user information gets saved to server.
The stars remain selected when user clicks on any star.
I want to reset the stars back to unselected when the response comes back from server for user's next action.
I dont know how to do that using Typescript/Javascript.
I tried changing it like below :
let ratingElement = document.querySelectorAll("#ratingField > label");
if (ratingElement.length > 0) {
for (let i = 0; i < ratingElement.length; i++) {
ratingElement[i].style.color = "#ddd";
}
}
Using the above code, the color gets reset. But there are other properties in CSS like hover,checked,unchecked on the widget.
How to add those properties to reset the stars same like its initial stage?
Below is my CSS for the widget:
.rating {
border: none;
float: left;
}
.rating > input {
display: none;
}
.rating > label:before {
margin: 5px;
font-size: 25px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > label {
color: #ddd;
float: right;
}
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label {
color: #ffd700;
} /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
color: #ffed85;
}
And my HTML code is like :
<fieldset
className="rating"
style={{ marginLeft: 5, marginRight: 5 }}
id="ratingField"
>
<input type="radio" id="star5" name="rating" value="5" />
<label
onClick={() => this.shortlist(5)}
className="full"
htmlFor="star5"
title="Awesome"
/>
<input type="radio" id="star4" name="rating" value="4" />
<label
onClick={() => this.shortlist(4)}
className="full"
htmlFor="star4"
title="Pretty good"
/>
<input type="radio" id="star3" name="rating" value="3" />
<label
onClick={() => this.shortlist(3)}
className="full"
htmlFor="star3"
title="Average"
/>
<input type="radio" id="star2" name="rating" value="2" />
<label
onClick={() => this.shortlist(2)}
className="full"
htmlFor="star2"
title="Kinda bad"
/>
<input type="radio" id="star1" name="rating" value="1" />
<label
onClick={() => this.shortlist(1)}
className="full"
htmlFor="star1"
title="Worst"
/>
</fieldset>
Can anyone help?
Use the browser inspector to understand what's the initial status of your stars widget (classes, inline styles, etc.). My advice is to not use inline styles.
After that you have to restore your initial classes, you can do it with:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
If there is even something like "checked" you can do:
// Check
document.getElementById("checkbox").checked = true;
// Uncheck
document.getElementById("checkbox").checked = false;
In your case you can uncheck element just with:
document.getElementById("star1").checked = false;
For each element checked you can uncheck it this way.
let ratingElement = document.querySelectorAll("#ratingField input[type=radio]:checked");
ratingElement.forEach( function( obj, idx ) {
console.log(obj);
obj.checked = false;
});
Check this fiddle - https://jsfiddle.net/8bk37a5j/16/
You dont need to set styes in javascript. Just change the "checked" value to true/false and the rest should be handled in CSS.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
$('input[type="radio"]').next('label').css('background-position','0 -16px')
for(var i=1;i<=parseInt($(this).attr('name'));i++)
{
$('input[name="'+i+'"]').next('label').css('background-position','0 0')
}
})
$('#reset').click(function(){
$('input[type="radio"]').next('label').css('background-position','0 -16px')
})
})
</script>
<style>
.rating {
overflow: hidden;
display: inline-block;
}
.rating-input {
float: right;
width: 16px;
height: 16px;
padding: 0;
margin: 0 0 0 -16px;
opacity: 0;
}
.rating-star {
cursor: pointer;
position: relative;
display: block;
width: 16px;
height: 16px;
background: url('https://www.everythingfrontend.com/samples/star-rating/star.png') 0 -16px;
}
.rating-star:hover {
background-position: 0 0;
}
</style>
<body>
<span class="rating">
<input type="radio" class="rating-input"
id="rating-input-1-5" name="1">
<label for="rating-input-1-5" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-4" name="2">
<label for="rating-input-1-4" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-3" name="3">
<label for="rating-input-1-3" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-2" name="4">
<label for="rating-input-1-2" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-1" name="5">
<label for="rating-input-1-1" class="rating-star"></label>
<input type="button" value="Reset" id="reset">
</span>
</body>
</html>
I'm trying to create a change function that creates a div for each checked checkbox selection and also removes the div when it's unchecked.
Inside these new divs I want to send the checkbox's img src as well.
*NOTE** My current JS is as far as I got and the second function only takes the img src from the selected checkbox and sends it to the image with id="loc-selected".
$(".loc-check").change(function(event) {
var x = $(this).val();
if ($(this).prop("checked") == true) {} else {}
});
function changeImg(elm) {
var val = elm.value;
var img = document.getElementById("img-" + val);
var src = img.src;
var imgSelectedRadio = document.getElementById("loc-selected");
imgSelectedRadio.src = src;
}
#loc-selected {
height: 50px;
width: 50px;
}
#loc-checkboxs {
display: flex;
padding: 20px;
}
#loc-checkboxs label {
display: block;
height: 38px;
width: 38px;
cursor: pointer;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loc-checkboxs">
<label for="usa">
<input class="loc-check" type="checkbox" id="usa" value="usa" onchange="changeImg(this)"/>
<span><img id="img-usa" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg"><span>
</label>
<label for="canada">
<input class="loc-check" type="checkbox" id="canada" value="canada" onchange="changeImg(this)"/>
<span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg"><span>
</label>
<label for="uk">
<input class="loc-check" type="checkbox" id="uk" value="uk" onchange="changeImg(this)"/>
<span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg"><span>
</label>
</div>
<div class="new-div-wrapper">
<div class="new-div">
<img id="loc-selected"></img>
</div>
</div>
I modified your code to dynamically add items with the same class as the values of the the checkboxes. It then automatically removes it if you uncheck.
$("input.loc-check").change(function(event) {
var value = $(this).val();
if ($(this).is(":checked")) {
$(".new-div-wrapper").append($(this).next().clone().wrapAll("<div class='new-div'></div>").parent().addClass(value));
} else {
$(".new-div-wrapper ." + value).remove();
}
});
#loc-selected {
height: 50px;
width: 50px;
}
#loc-checkboxs {
display: flex;
padding: 20px;
}
#loc-checkboxs label {
display: block;
height: 38px;
width: 38px;
cursor: pointer;
position: relative;
}
.new-div {
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loc-checkboxs">
<label for="usa">
<input class="loc-check" type="checkbox" id="usa" value="usa"/>
<span><img id="img-usa" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2f052996bde90001f96632_united-states-of-america.svg" \></span>
</label>
<label for="canada">
<input class="loc-check" type="checkbox" id="canada" value="canada"/>
<span><img id="img-canada" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a2cd7b0937442000184b147_canada.svg" \></span>
</label>
<label for="uk">
<input class="loc-check" type="checkbox" id="uk" value="uk"/>
<span><img id="img-uk" src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5a985a90ec8f79000104514a_united-kingdom.svg" \></span>
</label>
</div>
<div class="new-div-wrapper">
</div>
I was trying to make my radio button looks like checkbox. I have made it OK but the problem i am facing when i tried to fill it up with color. Means in default stage it's white and when i clicked it fills with black. But now i want to make it as different colors based on title and when i clicked it should filled with that color only. How do i make it ?
<label class="active">
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
Fiddle
You can add data-title to your label and give color to that and i have made a new style element which will change your style attribute of the radio button.
please check the below code
$(document).ready(function() {
$('label').click(function() {
var title = $(this).data('title');
$('.active').removeClass("active");
$(this).addClass("active");
$("<style> label.active span:after{ background-color: "+title+";} </style>").appendTo("head");
});
$('input:checked').trigger('click');
});
label {
width: 125px;
display: block;
float: left;
}
label input {
display: none;
}
label span {
display: block;
width: 17px;
height: 17px;
border: 1px solid black;
float: left;
margin: 0 5px 0 0;
position: relative;
}
label.active span:after {
content: "";
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="active" data-title='red'>
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label data-title='green'>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label data-title='blue'>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='orange'>
Address2
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='#ff11dd'>
Using Color Code
<span></span>
<input type="radio" name="n1" value="address">
</label>
Having different colors based on a title (or a value)... I don't think it is possible with just CSS.
In revenge, since you exactly know their order, you can set different colors using nth-child(n).
Try:
label:nth-child(1).active span:after {
background: red;
}
label:nth-child(2).active span:after {
background: orange;
}
label:nth-child(3).active span:after {
background: green;
}
Updated Fiddle
I am playing with some simple code but can not sort it out :( I would like to add color (class) to the selected radio button and previous ones...for example if button No3 is selected 1,2,3 should get a new color.
here is a simple code
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
I tried with .prevAll() but obviously it did not work.
here is the current script that adds class to all buttons
$(document).ready(function(e) {
$("input[type=radio]").click(function(){
$('form ul li input[type=radio] + label').addClass('abc');
})
});
demo
https://jsfiddle.net/8jct6tfs/2/
should I perhaps use loop? any help would be much appreciated
Use .index() of the closest li element of the clicked element and Using :lt(Elements having smaller index than specified) selector, apply class
Try this:
$(document).ready(function(e) {
$("input[type=radio]").click(function() {
$('form ul li input[type=radio] + label').removeClass('abc')
var index = $(this).closest('li').index();
$('form ul li input[type=radio] + label:lt("' + index + '")').addClass('abc');
})
});
form {
max-width: 500px;
margin-top: 25px;
}
form ul li {
display: inline-block;
width: 20%;
text-align: center;
vertical-align: top;
float: left;
position: relative
}
input {
position: relative;
top: 0;
left: 50%;
margin-left: -6px;
display: none;
}
input[type=radio]:checked + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: red;
}
input[type=radio] + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: gray;
}
label {
padding-top: 55px;
}
/*this class should be added*/
input[type=radio] + label.abc::before {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
</form>
Fiddle here
You can do something like this with help of prevAll() , parent() and siblings()
$(document).ready(function(e) {
$("input[type=radio]").click(function() {
$('form ul li label').removeClass('abc');
// remove class from all elements
$(this)
.siblings('label').addClass('abc')
// get label of clicked element and add class
.parent().prevAll()
// get all previous `li`
.find('label').addClass('abc');
// getting `label` inside and adding class to them
})
});
form {
max-width: 500px;
margin-top: 25px;
}
form ul li {
display: inline-block;
width: 20%;
text-align: center;
vertical-align: top;
float: left;
position: relative
}
input {
position: relative;
top: 0;
left: 50%;
margin-left: -6px;
display: none;
}
input[type=radio]:checked + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: red;
}
input[type=radio] + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: gray;
}
label {
padding-top: 55px;
}
/*this class should be added*/
input[type=radio] + label.abc::before {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
</form>
Try to use .closest() along with .prevAll() at this context to archive what you want,
$(document).ready(function(e) {
$("input[type=radio]").click(function(){
$(this).closest("ul").find('li .abc').removeClass("abc");
$(this).closest("li").prevAll("li").find("label").addClass("abc")
})
});
DEMO
$(document).ready(function(e) {
$("input[type=radio]").click(function(){
$(this).addClass('abc');
})
});
https://jsfiddle.net/u21cmnp1/
While you have numerous answers already, I thought I'd offer an alternative that takes care of deselecting the no-longer relevant elements, should a 'lower value' radio be selected:
$(document).ready(function(e) {
// binding to the 'change' event, rather than the 'click'
// in order that using the <label> will also work to
// update the user-interface:
$("input[type=radio]").on('change', function() {
// finding the first ancestor <li> element, caching it
// because we'll use it twice:
var li = $(this).closest('li');
// selects all the previous siblings of the <li>,
// adds the original <li> back to the collection
// and adds the 'abc' class-name to all selected
// elements:
li.prevAll().addBack().addClass('abc');
// selects all subsequent sibling elements of the
// original <li>, and removes the 'abc' class-name:
li.nextAll().removeClass('abc');
});
});
$(document).ready(function(e) {
$("input[type=radio]").on('change', function() {
var li = $(this).closest('li');
li.prevAll().addBack().addClass('abc');
li.nextAll().removeClass('abc');
});
});
.abc {
background-color: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
JS Fiddle demo.
Further, if we detect the change on the ancestor <li> element, it becomes a little more compact and simple (in that we don't have to subsequently find the ancestor, using either closest() or parent()):
$(document).ready(function(e) {
// as the 'change' event bubbles upwards
// through the DOM it can be detected on
// the ancestor <li> element:
$('li').on('change', function() {
// caching the <li> element for re-use:
var li = $(this);
// exactly as above:
li.prevAll().addBack().addClass('abc');
li.nextAll().removeClass('abc');
});
});
$(document).ready(function(e) {
$('li').on('change', function() {
var li = $(this);
li.prevAll().addBack().addClass('abc');
li.nextAll().removeClass('abc');
});
});
.abc {
background-color: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
JS Fiddle demo.
No javascript needed!
I found a way to style all previous siblings (opposite of ~) that may work depending on what you need.
Let's say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:
/* default link color is blue */
.parent a {
color: blue;
}
/* prev siblings should be red */
.parent:hover a {
color: red;
}
.parent a:hover,
.parent a:hover ~ a {
color: blue;
}
<div class="parent">
link
link
link
link
link
</div>
https://jsfiddle.net/aquadk/5ekjo5nx/4/
$("input[type=radio]").click(function(){
//getting the clicked value
last_value = $(this).val();
//looping each radio input
$("input[type=radio]").each(function(){
//if value of the input is <= last_value, apply the class, else remove the class
if($(this).val() <= last_value)
{
$(this).addClass('abc');
}
else
{
$(this).removeClass('abc');
}
})
})
I have a group of radio buttons, and a submit button. When I click on the submit button a message is shown telling me which radio button I clicked on. What I want to do now is change the color of the selected radio button, how can I do it? I have tried many things without success. Here is the code
function selectedButton() {
const optionContainer = document.querySelectorAll(".one");
for (var i = 0; i < optionContainer.length; i++) {
if (optionContainer[i].checked) {
document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
}
}
}
<input type="radio" name="gender" class="one" value="Male" />Male <br>
<input type="radio" name="gender" class="one" value="Female" />Female<br>
<input type="radio" name="gender" class="one" value="Other" />Other<br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
You can wrap the radio buttons to a div and then apply a CSS class when selected. Then, in your CSS, you can define the necessary styles.
function selectedButton() {
const optionContainer = document.querySelectorAll(".one");
for (var i = 0; i < optionContainer.length; i++) {
if (optionContainer[i].checked) {
optionContainer[i].parentElement.classList.add('selected');
document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
} else {
optionContainer[i].parentElement.classList.remove('selected');
}
}
}
.selected {
color: Red;
}
<div>
<input type="radio" name="gender" class="one" value="Male" />Male
</div>
<div>
<input type="radio" name="gender" class="one" value="Female" />Female
</div>
<div>
<input type="radio" name="gender" class="one" value="Other" />Other
</div>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
You can enclose the whole input element in a span and using parentNode change the color of the full radio button
function selectedButton() {
const optionContainer = document.querySelectorAll(".one");
for (var i = 0; i < optionContainer.length; i++) {
if (optionContainer[i].checked) {
document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
optionContainer[i].style.backgroundColor = "blue";
optionContainer[i].parentNode.style.backgroundColor = "blue";
optionContainer[i].parentNode.style.color = "yellow"
} else {
optionContainer[i].style.backgroundColor = "";
optionContainer[i].parentNode.style.backgroundColor = "";
optionContainer[i].parentNode.style.color = ""
}
}
}
<span><input type="radio" name="gender" class="one" value="Male" />Male</span> <br>
<span><input type="radio" name="gender" class="one" value="Female" />Female</span><br>
<span><input type="radio" name="gender" class="one" value="Other" />Other</span><br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
You can enclose the labels in span and using nextSibling color them with the radio button
function selectedButton() {
const optionContainer = document.querySelectorAll(".one");
for (var i = 0; i < optionContainer.length; i++) {
if (optionContainer[i].checked) {
document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
optionContainer[i].style.backgroundColor = "blue";
optionContainer[i].nextSibling.style.backgroundColor = "blue";
optionContainer[i].nextSibling.style.color = "yellow"
} else {
optionContainer[i].style.backgroundColor = "";
optionContainer[i].nextSibling.style.backgroundColor = "";
optionContainer[i].nextSibling.style.color = ""
}
}
}
<input type="radio" name="gender" class="one" value="Male" /><span>Male</span> <br>
<input type="radio" name="gender" class="one" value="Female" /><span>Female</span><br>
<input type="radio" name="gender" class="one" value="Other" /><span>Other</span><br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
function selectedButton() {
const optionContainer = document.querySelectorAll(".one");
for (var i = 0; i < optionContainer.length; i++) {
if (optionContainer[i].checked) {
document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
optionContainer[i].style.backgroundColor = "red";
}
else {
optionContainer[i].style.backgroundColor = "";
}
}
}
You can customize the style of radio button as your wish. Direct styling on radio will not work.
Below is an example.
You have not provided the style for selected class as well. Please add that to see the style change.
This is the style you needed.
.container.selected input:checked ~ .checkmark {
background-color: red;
}
function selectedButton() {
const optionContainer = document.querySelectorAll(".one");
for (var i = 0; i < optionContainer.length; i++) {
if (optionContainer[i].checked) {
optionContainer[i].parentElement.classList.add("selected");
document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
} else {
optionContainer[i].parentElement.classList.remove("selected");
}
}
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
.container.selected input:checked ~ .checkmark {
background-color: red;
}
<h1>Custom Radio Buttons</h1>
<label class="container"
>One
<input type="radio" class="one" checked="checked" name="radio" value="One" />
<span class="checkmark"></span>
</label>
<label class="container"
>Two
<input type="radio" class="one" name="radio" value="Two" />
<span class="checkmark"></span>
</label>
<label class="container"
>Three
<input type="radio" name="radio" class="one" value="Three" />
<span class="checkmark"></span>
</label>
<label class="container"
>Four
<input type="radio" class="one" name="radio" value="Four" />
<span class="checkmark"></span>
</label>
<div id="display"></div>
<button onclick="selectedButton()">Submit</button>