On input field mouse hover display tooltip - javascript

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

Related

Having trouble turning radio buttons into responsive star ratings. I am able to get non-resposive stars or responsive radio buttons

I've tried different variations of the code, adding the star image as a png, adding it as a Unicode image but I'm still getting either none responsive stars or only responsive radio buttons. I'm really not sure what I'm missing. It looks like it should work but clearly something is missing when it comes to the 'star' image in the code. I'm guessing with the CSS code?
<!HTML>
<div class="col-4">
<img src="images/g13.jpg">
<h4>Green X-Mas</h4>
<p>$35.00</p>
<div class="rate">
<input type="radio" id="star5.3" name="rate.3" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4.3" name="rate.3" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3.3" name="rate.3" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2.3" name="rate.3" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1.3" name="rate.3" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div>
/CSS star rating/
'''.rate {
float: left;
height: 46px;
padding: 0 10px;
}
.rate:not(:checked) > input {
position:absolute;
top:-9999px;
}
.rate:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}
.rate:not(:checked) > label:before {
content: '★ ';
}
.rate > input:checked ~ label {
color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
}'''

JS function conflicting with CSS style

I have a radio button part into a large form which is styled in a way that when it's hovered or checked, it has a different background color. Though, I have an important js function for the rest of the form which keeps the style from working. It took me time to understand that the conflict came from that function, but I have no clue on how to solve this.
Here's what I got:
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
return false
});
obj_critere_form = new critere_form();
obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>
The problem is return false; in the click handler. That's equivalent to event.preventDefault();. The default action of clicking on a label is to click on the element that the label is associated with by the for attribute; return false; prevents that from happening, so clicking on the label doesn't check the button.
I'm not sure why you have that in the click handler in the first place. All it does is prevent clicking on the label from working.
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
//return false
});
//obj_critere_form = new critere_form();
//obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>
In this case it looks like you're using a library for the form which could have it's own styles.
Use this at the end of the CSS you need to come through but use it sparingly and with caution.
//example
color: blue !important;

JavaScript quiz with multiple questions

Below I’ve made a small quiz with 4 questions and questions 2,3 and 4 are hidden with CSS, but you can try to remove the style from CSS (".pytja2, .pytja3, .pytja4 { display: none;}") to see all questions or put a style of display: hidden to each question one by one and you will see them.
I did that because I would like to show the next question when I click on the button Next then next question will show after I click Next button each time.
But there’s a problem that I have with question 2 it’s not showing and it doesn’t show any error in Console Log and I added on JavaScript a function that when I click button Next then the first question would be hidden and it would show the next question, but I do not know what’s wrong.
<div class="quiz">
<div id="pytja1">
<span class="quest1">I am a ?</span>
<form class="questions1" action="">
<input class="correct" type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>
<input id="bot" type="button" value="Next">
</form>
</div>
<div id="pytja2">
<span class="quest2">Football has letters ?</span>
<form class="questions2" action="">
<input class="correct" type="radio" name="gender" value="male"> 7<br>
<input type="radio" name="gender" value="female"> 5<br>
<input type="radio" name="gender" value="other"> 6<br>
<input id="bot" type="button" value="Next">
</form>
</div>
<div id="pytja3">
<span class="quest3">VV stands for ?</span>
<form class="questions3" action="">
<input type="radio" name="gender" value="male"> BMW <br>
<input class="correct" type="radio" name="gender" value="female"> Volksvagen<br>
<input type="radio" name="gender" value="other"> Audi<br>
<input id="bot" type="button" value="Next">
</form>
</div>
<div id="pytja4">
<span class="quest4">What year it is ?</span>
<form class="questions4" action="">
<input type="radio" name="gender" value="male"> 2017<br>
<input type="radio" name="gender" value="female"> 2015<br>
<input class="correct" type="radio" name="gender" value="other"> 2019<br>
<input id="bot-submit" type="submit" value="Submit">
</form>
</div>
</div>
.quiz{
margin-top: 50px;
margin-left: 40%;
width: 250px;
height: 100px;
background-color: coral;
}
.quest1{
background-color: cadetblue;
padding-right: 50px;
margin-left: 30px;
font-size: 22px;
}
.quest2{
background-color: cadetblue;
padding-right: 50px;
margin-left: 30px;
font-size: 22px;
position: absolute;
top: 3884px;
}
.quest3{
background-color: cadetblue;
padding-right: 50px;
margin-left: 30px;
font-size: 22px;
position: absolute;
top: 3884px;
}
.quest4{
background-color: cadetblue;
padding-right: 50px;
margin-left: 30px;
font-size: 22px;
position: absolute;
top: 3884px;
}
.questions1{
margin-left: 28px;
background-color: cyan;
width: 220px;
padding: 10px;
font-size: 20px;
}
.questions2{
margin-left: 28px;
background-color: red;
width: 150px;
padding: 10px;
font-size: 20px;
position: absolute;
top: 3925px;
}
.questions3{
margin-left: 28px;
background-color: greenyellow;
width: 150px;
padding: 10px;
font-size: 20px;
position: absolute;
top: 3925px;
}
.questions4{
margin-left: 28px;
background-color: olivedrab;
width: 150px;
padding: 10px;
font-size: 20px;
position: absolute;
top: 3925px;
}
.bot{
margin-top: 10px;
}
.pytja2,.pytja3,.pytja4{
display: none;
}
/* End of Quiz*/
let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let nextQuestion = document.getElementById('bot');
let result = document.getElementById('bot-submit');
nextQuestion.onclick = function () {
if (nextQuestion === question1) {
question1.style.display = 'none'
} else if (nextQuestion === question2) {
question2.style.display = 'block'
}
}
So, it appears there was some confusion on your use of bot as an ID and as a CLASS selector within your code. I took the liberty of cleaning this up and making it so the Next buttons use .bot as a class. If you're going to re-use a name value on an element, class is the syntax to use. ID is supposed to be specific to one element in the DOM.
Also, if you are creating a form to submit all answers, it would be better to declare <form> once, and then have each set of radio buttons contain the same name for each set of questions e.g (gender, car, etc.) so when you process the form, it will be easy to grab the selected choices by the user for each set of questions.
I cleaned up some of the CSS as well to help, and added a for loop that binds an onclick function to each Next button in the form, so upon each click, it will check the parentNode.Id to see what div elements it should hide and make visible for each next question block. This for loop is achieved by referencing the class .bot using document.querySelectorAll('.bot');
Please let me know if you have any further questions or need me to explain further the changes I made in the below snippet:
let question1 = document.getElementById('pytja1');
let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let result = document.getElementById('bot-submit');
let nextButtons = document.querySelectorAll('.bot');
for (let i = 0; i < nextButtons.length; i++) {
let nextQuestion = nextButtons[i];
nextQuestion.onclick = function() {
switchToNextQuestion(this);
}
}
function switchToNextQuestion(nextQuestion) {
let parentId = nextQuestion.parentNode.id;
if (parentId === 'pytja1') {
question1.style.display = 'none';
question2.style.display = 'block';
} else if (parentId === 'pytja2') {
question2.style.display = 'none';
question3.style.display = 'block';
} else if (parentId === 'pytja3') {
question3.style.display = 'none';
question4.style.display = 'block';
}
}
result.onclick = function() {
alert('I am submitting the quiz!');
}
form {
width: 100%;
position: relative;
float: left;
padding-top: 50px;
}
.quiz {
margin: 0px auto;
width: 250px;
height: 100px;
}
.quest1,
.quest2,
.quest3,
.quest4 {
background-color: cadetblue;
font-size: 22px;
}
.questions1 {
margin-left: 28px;
background-color: cyan;
width: 220px;
padding: 10px;
font-size: 20px;
}
.questions2 {
background-color: red;
}
.questions3 {
background-color: greenyellow;
}
.questions4 {
background-color: olivedrab;
}
.bot {
margin-top: 10px;
}
#pytja2,
#pytja3,
#pytja4 {
margin-left: 28px;
display: none;
width: 220px;
padding: 10px;
font-size: 20px;
}
/* End of Quiz*/
<form id="quiz-form">
<div class="quiz">
<div id="pytja1" class="questions1">
<span class="quest1">I am a ?</span><br/>
<input type="radio" name="gender" value="male" class="correct"> Male<br/>
<input type="radio" name="gender" value="female"> Female<br/>
<input type="radio" name="gender" value="other"> Other<br/>
<input class="bot" type="button" value="Next" />
</div>
<div id="pytja2" class="questions2">
<span class="quest2">Football has # letters ?</span><br/>
<input type="radio" name="football" value="8" class="correct"> 8<br/>
<input type="radio" name="football" value="5"> 5<br/>
<input type="radio" name="football" value="6"> 6<br/>
<input class="bot" type="button" value="Next" />
</div>
<div id="pytja3" class="questions3">
<span class="quest3">VW stands for ?</span><br/>
<input type="radio" name="car" value="BMW" /> BMW <br/>
<input type="radio" name="car" value="Volkswagen" class="correct" /> Volkswagen<br/>
<input type="radio" name="car" value="Audi" /> Audi<br/>
<input class="bot" type="button" value="Next" />
</div>
<div id="pytja4" class="questions4">
<span class="quest4">What year it is ?</span><br/>
<input type="radio" name="year" value="2017" /> 2017<br/>
<input type="radio" name="year" value="2015" /> 2015<br/>
<input type="radio" name="year" value="2019" class="correct" /> 2019<br/>
<input id="bot-submit" type="submit" value="Submit" />
</div>
</div>
</form>

Change css of HTML element from typescript/javascript

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>

validate only last radio button of a group of radio

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).

Categories