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');
}
})
})
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 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'm doing rating star when we hover on any star I want to display tooltip as far now I tried to like this there is a problem in jquery I couldn't target proper class name I don't have an idea how to write that class. I used input type radio and label how I will load this attributes in jquery can anyone suggest me to achieve that functionality.
thanks in Advance...
$(document).ready(function () {
$("input[name=rating]").on('mouseenter', showBox);
$("input[name=rating]").on('mouseleave', hideBox);
function showBox(e) {
var x = e.pageX - 80;
var y = e.pageY + 20;
$('#tooltip_block').fadeIn();
$('#tooltip_block').offset({ left: x, top: y });
}
function hideBox() {
$('#tooltip_block').fadeOut();
}
});
.rating_widgets {
display: flex;
justify-content: center;
margin-top: 25px;
}
.rating {
border: none;
float: left;
}
.rating > input {
display: none;
}
.rating > label:before {
margin: 5px;
font-size: 24px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked) {
color: #FFD700;
}
.rating > input:checked,
.rating > input:checked,
.rating > input:checked ~ label,
.rating > input:checked ~ label {
color: #FFED85;
}
#tooltip_block {
display: none;
position: absolute;
z-index: 1;
color: #ffffff;
background-color: #000;
}
<div class="rating_widgets">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" />
<label class="full" for="star5"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" />
<label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label class="full" for="star4"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" />
<label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label class="full" for="star3"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" />
<label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label class="full" for="star2"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" />
<label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label class="full" for="star1"></label>
<input type="radio" id="starhalf" name="rating" value="half" />
<label class="half" for="starhalf"></label>
</fieldset>
</div>
<div id="tooltip_block">
<div class="top_bar">4.2 stars out of 5 stars</div>
</div>
Your issue is with the fact that the input fields aren't the ones you're actually hovering on, it's the labels.
This should work (Note that I've also replaced fadeIn() / fadeOut() with show() / hide() as mouse movements queue up the fade animations and make it flicker if you move your mouse around the star).
$(document).ready(function(){
$("label").hover(showBox, hideBox);
function showBox(e) {
var x = e.pageX - 80;
var y = e.pageY + 20;
$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());
$('#tooltip_block').show();
$('#tooltip_block').offset({ left: x, top: y });
}
function hideBox(){
$('#tooltip_block').hide();
}
});
.rating_widgets {
display: flex;
justify-content: center;
margin-top: 25px;
}
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
font-size: 24px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
margin-left: 10px;
}
.rating > label {
color: #ddd;
float: right;
margin-left: 10px;
}
.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked){ color: #FFD700; }
.rating > input:checked,
.rating > input:checked,
.rating > input:checked ~ label,
.rating > input:checked ~ label {
color: #FFED85;
}
#tooltip_block {
display: none;
position: absolute;
z-index: 1;
color: #ffffff;
background-color: #000;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating_widgets">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5"/>
<label class = "full" for="star5"></label>
<input type="radio" id="star4half" name="rating" value="4.5" />
<label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label class = "full" for="star4"></label>
<input type="radio" id="star3half" name="rating" value="3.5" />
<label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label class = "full" for="star3"></label>
<input type="radio" id="star2half" name="rating" value="2.5" />
<label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label class = "full" for="star2"></label>
<input type="radio" id="star1half" name="rating" value="1.5" />
<label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label class = "full" for="star1"></label>
<input type="radio" id="starhalf" name="rating" value="0.5" />
<label class="half" for="starhalf"></label>
</fieldset>
</div>
<div id="tooltip_block">
<div class="top_bar"><span class="rating_value"></span> stars out of 5 stars</div>
</div>
edit
This is the code that's inserting the values into the hover boxes
$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());
if you want to get rid of them remove that line of javascript (you should probably remove
<span class="rating_value"></span>
from the hover div as well then as it serves no purpose without that bit of js).
edit #2
As far as the hover showing up inbetween the stars - I updated your css. The thing is you were setting
.rating > label:before {
margin: 5px;
...
}
which effectively makes the elements that show your stars press up right besides one another. You can use
.rating > label {
...
margin-left: 10px;
}
.rating > .half:before {
...
margin-left: 10px;
}
Instead to create margins around the label elements
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.
i have a form with questions, and need validate these questions, answered with radio buttons, this form have 20 or more questions, the questions have options 1,2,3. 1 = good, 2 = problem, 3 = critic. the user can check only 5 times the option 3. how i can do it with javascript?
i use only normal validate to unchecked options.
here a preview of radios:
JSFiddle
<div class="inline">
<label for="option1">
<input type="radio" name="group[1]" value="1">1</label>
<label for="option1">
<input type="radio" name="group[1]" value="1">2</label>
<label for="option1">
<input type="radio" name="group[1]" value="1">3</label>
</div>
CSS
.inline {
display: inline;
}
.inline label, input[type="radio"] {
float: left;
}
.inline label {
display: block;
background: #eee;
margin-left: 5px;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
color: #333;
font-family: arial, sans-serif;
}
.inline input[type="radio"] {
display: block;
}
I guess value="1" in every radio was a typo and you meant
<label for="option1">
<input type="radio" id="option1" name="group[1]" value="1">1</label>
<label for="option2">
<input type="radio" id="option2" name="group[1]" value="2">2</label>
<label for="option3">
<input type="radio" id="option3" name="group[1]" value="3">3</label>
Then you can find how many checked radios with value="3" are there using
jQuery('input[value="3"]:checked').length
and act accordingly if the length is greater than 5.
Edit: jsfiddle demo (with the limit set to 2, not 5).