hello guys here is my doubt about how to get the radio button checked using simple jquery and display the value by its side
for example when the first input tag is checked the star should change it to yellow color :) when unchecked it should change back to its normal color
Please do not suggest to me any plugins
.myratings {
font-size: 0.875rem;
color: green;
position: relative;
top: 12px;
margin-left: 9px;
}
.rating>[id^="star"] {
display: none
}
.rating>label:before {
margin-right: 5px;
font-size: 1.75rem;
display: inline-block;
content: "\2605";
font-family: "Font Awesome 5 Free";
}
.rating>.half:before {
content: "\2605";
position: absolute;
width: 10px;
overflow: hidden;
}
.rating>label {
color: #ddd!important;
float: right
}
.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
color: #FFD700!important;
}
.checked {
color: #FFD700!important;
}
.rating>[id^="star"]:checked+label:hover,
.rating>[id^="star"]:checked~label:hover,
.rating>label:hover~[id^="star"]:checked~label,
.rating>[id^="star"]:checked~label:hover~label {
color: #FFD700!important;
}
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="poor - 1 star"></label>
</fieldset>
<span class="myratings">0</span>
One way to approach this problem is to use vanilla javascript to track the currently selected rating and update each label with the appropriate color.
References I used to create this solution:
setAttribute
//The current rating
let currentRating = 0;
//Grab all the label elements and sort them from least to greatest using the last number in the htmlFor string
let labels = Array.from(document.getElementsByTagName("label")).sort((a, b) => a.htmlFor.substring(4) - +b.htmlFor.substring(4));
//onclick event handler
function clicker(num) {
//If the user clicked on the current rating, set to 0
if (currentRating == num) currentRating = 0;
//Otherwise, set it to the current rating
else currentRating = num;
//Update the text for the current rating
document.querySelector(".myratings").innerHTML = currentRating;
//Loop through all the labels and update their colors
for (let i = 0; i <= 4; i++) {
let label=labels[i];
if ((i + 1)> currentRating) label.setAttribute('style', 'color:#ddd !important');
else label.setAttribute('style', 'color:#FFD700 !important')
}
Related
I am trying to turn These checkboxes:
Into These Checkboxes(I will refer to these as CheckButtons):
Directly below is the code of the current Check Boxes:
#foreach (var department in Model.Select(u => new { u.DepartmentId, u.DepartmentName }).Distinct().ToDictionary(u => u.DepartmentId, u => u.DepartmentName).OrderBy(u => u.Value))
{
i++;
<text> </text>
#department.Value <input name="department_chkbox" type="checkbox" value="#department.Key" />
if (i > 5)
{
<text><br></text>
i = 0;
}
}
The HTML of the desired ones is below but it does not tell me much:
<td id="checkboxcontainer">
<input type="checkbox" name="statusId" value="1" id="ckActive" checked="checked" /><label for="ckActive">Active</label>
<input type="checkbox" name="statusId" value="2" id="ckLeave" /><label for="ckLeave">Leave</label>
<input type="checkbox" name="statusId" value="3" id="ckSusp" /><label for="ckSusp">Suspended</label>
<input type="checkbox" name="statusId" value="4" id="ckTerm" /><label for="ckTerm">Terminated</label>
</td>
Does anyone know what is being called to make the checkboxes turn into "checkbuttons" I wrote the check box code, but I do not have access to the check button code. Im assuming that this is something that is done in eitehr Javascript or Jquery. Also there is no class for the
Going off of the desired HTML, it's relatively simple solution using only CSS. Of course, you'll want to tweak it to get it looking exactly the way you want.
#checkboxcontainer {
display: flex;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
display: block;
min-width: 100px;
border: solid #999;
border-width: 1px 1px 1px 0;
background: #eee;
margin: 0;
padding: 2px 0;
text-align: center;
}
input[type=checkbox]:checked + label {
background: #ccc;
}
input[type=checkbox] + label:first-of-type {
border-radius: 3px 0 0 3px;
border-left-width: 1px;
}
input[type=checkbox] + label:last-of-type {
border-radius: 0 3px 3px 0;
}
<div id="checkboxcontainer">
<input type="checkbox" name="statusId" value="1" id="ckActive" checked="checked" /><label for="ckActive">Active</label>
<input type="checkbox" name="statusId" value="2" id="ckLeave" /><label for="ckLeave">Leave</label>
<input type="checkbox" name="statusId" value="3" id="ckSusp" /><label for="ckSusp">Suspended</label>
<input type="checkbox" name="statusId" value="4" id="ckTerm" /><label for="ckTerm">Terminated</label>
</div>
And to generate this HTML using Razor you'd have something like this:
<div id="checkboxcontainer">
#foreach (var department in Model.Select(u => new { u.DepartmentId, u.DepartmentName }).Distinct().ToDictionary(u => u.DepartmentId, u => u.DepartmentName).OrderBy(u => u.Value))
{
i++;
<input name="department_chkbox" type="checkbox" value="#department.Key" id="department_chkbox#(i)" /><label for="department_chkbox#(i)">#department.Value</label>
}
</div>
I have a quiz that should move on to the next question once you select an answer but at the moment my code doesn't work and it allows the user to select multiple answers, without anything happening afterwards.
Once they finish the last question their result should be displayed to them.
document.getElementById("beginquiz").addEventListener("click", startQuiz);
function startQuiz() {
document.getElementById("intro").style.display = "none";
document.getElementById("q1").style.display = "block";
}
var answerData = {
"p": 0,
"vp_w": 0,
"vp_e": 0,
"vp_a": 0,
"vp_s": 0
};
var buttons = document.querySelectorAll(".button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = buttonClicked;
}
function buttonClicked(buttonNext) {
var target = answer.target; //1. 'this' is parent, need target
console.log(target);
//get the current element's data-score value
var selectedType = target.dataset.score; //2. score is the value
//increase the selected answer's 'type' by 1
console.log(selectedType);
answerData[selectedType]++;
//Hide the current question div
this.parentElement.style.display = "none";
//Work out what the next question div is
var nextQuestion = this.parentElement.dataset.next;
//Display the next question element
console.log(nextQuestion);
document.getElementById(nextQuestion).style.display = "block";
if(document.getElementById(nextQuestion))
document.getElementById(nextQuestion).style.display = "block";
else
printResult();
}
function calculateResult (answerData){
var highest = Math.max(total_points.p, total_points.vp_s, total_points.vp_e, total_points.vp_w, total_points.vp_a);
var result;
for (var i in total_points) {
if (total_points.hasOwnProperty(i)){
if (total_points[i] === highest){
result = i;
}
}
}
switch(result) {
case 'p':
result = 'President';
break;
case 'vp_w':
result = 'Vice-President Welfare';
break;
case 'vp_e':
result = 'Vice-President Education';
break;
case 'vp_s':
result = 'Vice-President Sports';
break;
case 'vp_a':
result = 'Vice-President Activities';
break;
default:
break;
}
return result;
};
function printResult() {
document.getElementById('result').innerHTML = '<h2>You are: '+result+'</h2>';
}
.question,
#result {
display: none;
}
.button li {
border: 1px solid;
border-radius: 3px;
background-color: #eee;
text-align: center;
line-height: 2em;
padding: 0.5em;
margin: 0.5em;
width: 80%;
margin: 0 auto;
}
.button li:hover {
color: #bfbfbf;
background-color: #555;
}
#intro,
.question,
#result {
max-width: 600px;
margin: 0 auto;
}
#beginquiz {
border: 1px solid;
border-radius: 3px;
background-color: #eee;
text-align: center;
line-height: 2em;
padding: 0.5em;
margin: 0.5em;
width: 20em;
margin: 0 auto;
}
#beginquiz:hover {
color: #bfbfbf;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
<button id="beginquiz">Start the quiz</button>
</div>
<form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
<div class="question" id="q1" data-next="q2">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q2" data-next="q3">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q3" data-next="q4">
<li><div id="q3" data-next="q4">What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q4">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
</form>
<div id="result">
<h2>You are:</h2>
</div>
In your buttonclicked function you had some errors on how you were getting the elements. Here is the updated function. There was another error in the printResults that there was no call to display the results div. You also are not calling the calulateResults functions.
function buttonClicked(buttonNext) {
//var target = answer.target; //1. 'this' is parent, need target
var target;
for(i=answer.length-1;i>=0;i--){
if(answer[i].checked == true){
target = answer[i];
break;
}
}
console.log(target);
//get the current element's data-score value
var selectedType = target.dataset.score; //2. score is the value
//increase the selected answer's 'type' by 1
console.log(selectedType);
answerData[selectedType]++;
//Hide the current question div
console.log(target.parentElement.id);
//this.parentElement.style.display = "none";
target.parentElement.style.display = "none"
//Work out what the next question div is
var nextQuestion = target.parentElement.dataset.next;
//Display the next question element
console.log(nextQuestion);
//document.getElementById(nextQuestion).style.display = "block";
if(document.getElementById(nextQuestion))
document.getElementById(nextQuestion).style.display = "block";
else
printResult();
}
You needed to use a for loop to get the target answer in the array of answers. I decremented the loop to get the last answered question. The other change is to how you got the parent ID. With this.parentElement it was coming back with the body due to the this element was focused on the form, the element the clcik event was fired on. The last thing I commented out the extra document.getElementById(nextQuestion).style.display = "block"; before the check.
I have this progress bar working. The only thing I am having issues with is changing the color when as many of the check boxes are checked...
0-3 background = red
4-7 = yellow
8-10 = Green
My CSS
.progress-bar-wrapper .progress-bar-filling {
height: 100%;
color: #fff;
text-align: right;
width: 0;
background-color: #39b54a;
border-radius:20px;
}
.progress-bar-wrapper .progress-bar-percent {
font-weight: 400;
font-family: sans-serif;
color: #626162;
padding-top: 6px;
display: block;
}
My HTML / Javascript
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>
window.onload = xxx;
function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz
$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)
The jFiddle is here Jfiddle
Thanks
You can just check the no. of checked checkboxes via $(".check_id:checked").length and change just the background-color css property.
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>
window.onload = xxx;
function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz
$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)
//.html(percent + "% ");
$('.progress-bar-percent').html( percent + "% " );
// calculate color
if($(".check_id:checked").length <= 3)
{
$("#progress-bar-filling").css("background-color","red");
}
else if($(".check_id:checked").length >= 4 && $(".check_id:checked").length <= 7 )
{
$("#progress-bar-filling").css("background-color","yellow");
}
else if($(".check_id:checked").length >= 8 && $(".check_id:checked").length <= 10 )
{
$("#progress-bar-filling").css("background-color","green");
}
}
var complete = zzz+'0';
progress(complete, $('#progress-bar'));
})
}
</script>
<p id="insert"></p>
<div class="progress-bar-wrapper">
<div id="progress-bar">
<div id="progress-bar-filling" class="progress-bar-filling"></div>
</div>
<div class="progress-bar-percent"></div>
</div>
Example : https://jsfiddle.net/tLq07L77/1/
Since you already know the number of :checked checkboxers you can add 3 new classes (in your css) to set the background-color of your progress-bar:
.progress-bar-wrapper .progress-bar-filling.fill0 {
background-color: red;
}
.progress-bar-wrapper .progress-bar-filling.fill1 {
background-color: yellow;
}
.progress-bar-wrapper .progress-bar-filling.fill2 {
background-color: #39b54a;
}
Inside your javascript code - first - remove all the fill0,fill1,fill2 classes, and then - based on the number you have - add only the relevant class:
$('.progress-bar-filling').removeClass('fill0 fill1 fill2');
if (zzz <= 3) {
$('.progress-bar-filling').addClass('fill0')
} else if (zzz <= 7) {
$('.progress-bar-filling').addClass('fill1')
} else {
$('.progress-bar-filling').addClass('fill2')
}
Here is a working example:
https://jsfiddle.net/g4Lhvawq/
So I'm having an issue. I have to design a css button that can be customized by a user on the fly, with a few customization options. They have to be able to add text, change the button colour, change the button size and change how round the borders are. The thing is, my javascript functions to change the borders and the size of the button aren't working. They also make the other functions not work, oddly enough.
I was told to avoid using jQuery.
The Javascript for the size changing function:
function aBc()
{
var a = document.getElementById("buttontest");
if(document.getElementById("smallS").checked)
{
a.style.width = 100px;
}
else if(document.getElementById("mediumS").checked)
{
a.style.width = 150px;
}
else if(document.getElementById("largeS").checked)
{
a.style.width = 200px;
}
else if(document.getElementById("hugeS").checked)
{
a.style.width = 300px;
}
}
The Javascript for the border changing function:
function changeCorners()
{
var bordertest;
bordertest = document.getElementById("buttontest");
if (document.getElementById("none").checked)
{
bordertest.style.borderRadius = 0px;
}
else if (document.getElementById("small").checked)
{
bordertest.style.borderRadius = 10px;
}
else if (document.getElementById("medium").checked)
{
bordertest.style.borderRadius = 20px;
}
else if (document.getElementById("large").checked)
{
bordertest.style.borderRadius = 30px;
}
else if (document.getElementById("total").checked)
{
bordertest.style.borderRadius = 40px;
}
}
The HTML for everything:
Button Text: <input type="text" onkeydown="changeText(event)" id="bText"><br />
Text Color: <input type="color" id="tColor" name="tColor" value="#3e3e3e" oninput="changeTextColor(tColor.value)"><br />
How Round: <input type="radio" name="roundness" id="none" checked="checked" onchange=changeCorners()>
<label for="none">Square</label>
<input type="radio" name="roundness" id="small" onchange=changeCorners()>
<label for="small">Small Roundness</label>
<input type="radio" name="roundness" id="medium" onchange=changeCorners()>
<label for="medium">Medium Roundness</label>
<input type="radio" name="roundness" id="large" onchange=changeCorners()>
<label for="large">Large Roundness</label>
<input type="radio" name="roundness" id="total" onchange=changeCorners()>
<label for="total">Completely Round</label><br />
Background Color: <input type="color" id="backColor" name="backColor" value="#dddddd" oninput="changeBgColor(backColor.value)"><br />
Shadow Color: <input type="color" id="shadColor" name="shadColor" value="#888888" oninput="changeShadColor(shadColor.value)"><br />
Button Size: <input type="radio" name="size" id="smallS" checked="checked" onchange=aBc()>
<label for="smallS">Small</label>
<input type="radio" name="size" id="mediumS" onchange=aBc()>
<label for="mediumS">Medium</label>
<input type="radio" name="size" id="largeS" onchange=aBc()>
<label for="largeS">Large</label>
<input type="radio" name="size" id="hugeS" onchange=aBc()>
<label for="hugeS">Extra Large</label><br />
<p><input type="button" value="" class="test1" id="buttontest"></p>
You need to quote your property values.
Things like a.style.width = 100px; should be a.style.width = "100px";
How to limit checkbox selection to one using jquery or javascript and other checkbox should be disabled after one checkbox selected?
<input type="checkbox" name="size[]" id="size" value="Small" />Small
<input type="checkbox" name="size[]" id="size" value="Medium" />Medium
<input type="checkbox" name="size[]" id="size" value="Large" />Large
<input type="checkbox" name="size[]" id="size" value="Xl" />XL
Here The Example But I Want Same Thing In Html Or Php
http://gravitywiz.com/demos/limit-how-many-checkboxes-can-be-checked/
Problem Is Solved Now Here The Final Solution
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />
$("input[type='checkbox']").on("click" , function(){
$("input[type='checkbox']").not(this).attr("disabled", "disabled");
});
Working Example
If you disable, user can't change his choice after first selection.
Here is a radio button behavior for checkbox.
$("input[type=checkbox]").on('click', function() {
$("input[type=checkbox]").not(this).attr('checked', false);
});
http://jsfiddle.net/BxF4Y/
But to doing that, the best way is to use radio buttons.
Browsing the source code of that page reveals the jQuery they used to achieve that effect. You should just be able to change the checkboxLimit to 1.
<script type="text/javascript">
jQuery(document).ready(function($) {
$.fn.checkboxLimit = function(n) {
var checkboxes = this;
this.toggleDisable = function() {
// if we have reached or exceeded the limit, disable all other checkboxes
if(this.filter(':checked').length >= n) {
var unchecked = this.not(':checked');
unchecked.prop('disabled', true);
}
// if we are below the limit, make sure all checkboxes are available
else {
this.prop('disabled', false);
}
}
// when form is rendered, toggle disable
checkboxes.bind('gform_post_render', checkboxes.toggleDisable());
// when checkbox is clicked, toggle disable
checkboxes.click(function(event) {
checkboxes.toggleDisable();
// if we are equal to or below the limit, the field should be checked
return checkboxes.filter(':checked').length <= n;
});
}
$("#field_11_1 .gfield_checkbox input:checkbox").checkboxLimit(3);
});
</script>
Yes, this is an old thread, however there is no real conclusion here. I have included a fiddle with my version of how check-boxes should work should you wish to limit the number of boxes checked by the user.
/** Begin HTML **/
<div class="cContainer">
<div class="cDropdown">
<div class="downArrow"></div>
<h4>Night Life</h4>
</div>
<div class="multiCheckboxes stick">
<input id="1" class="stick" type="checkbox" value="1" name="l-28">
<label class="stick" for="1">Dive Bar</label>
<br>
<input id="2" class="stick" type="checkbox" value="2" name="l-28">
<label class="stick" for="2">Pub</label>
<br>
<input id="3" class="stick" type="checkbox" value="3" name="l-28">
<label class="stick" for="3">Dance Club</label>
<br>
<input id="4" class="stick" type="checkbox" value="4" name="l-28">
<label class="stick" for="4">Pool Hall</label>
<br>
<input id="5" class="stick" type="checkbox" value="5" name="l-28">
<label class="stick" for="5">Karaoke</label>
<br>
<input id="6" class="stick" type="checkbox" value="6" name="l-28">
<label class="stick" for="6">Sports Bar</label>
<br>
<input id="7" class="stick" type="checkbox" value="7" name="l-28">
<label class="stick" for="7">Trendy</label>
<br>
</div>
/** END HTML **/
/** BEGIN JS **/
$('.cDropdown').on('click', function (e) {
$('.multiCheckboxes').slideUp(50)
e.stopPropagation();
currentDrop = $(this).next();
currentDrop.stop().slideToggle();
});
$('input:checkbox[name="l-28"]').on('change', function () {
var nightLifeLimit = $('input:checkbox[name="l-28"]:checked').length;
if (nightLifeLimit == 2) {
$('input:checkbox[name="l-28"]').each(function () {
if ($(this).is(':checked')) {
return;
}
else {
$(this).prop('disabled', true);
}
});
}
else {
$('input:checkbox[name="l-28"]').each(function () {
$(this).prop('disabled', false);
});
}
});
/** END JS **/
/** BEGIN CSS **/
.cDropdown {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px inset #D3D3D3;
clear: right;
padding: 4px 3px;
width: 150px;
}
.cDropdown h4 {
font-size: 0.86em;
font-weight: normal;
margin: 0 0 0 1px;
padding: 0;
}
.downArrow {
border-left: 8px solid rgba(0, 0, 0, 0);
border-right: 8px solid rgba(0, 0, 0, 0);
border-top: 8px solid #3C3C3C;
float: right;
height: 0;
margin: 3px 0 0 3px;
width: 0;
}
.multiCheckboxes {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #3C3C3C;
display: none;
left: 9px;
max-height: 200px;
overflow: auto;
padding: 5px;
position: absolute;
top: 35px;
width: 146px;
z-index: 999;
}
.multiCheckboxes label {
float: none !important;
font-size: 0.9em;
width: 7.6em !important;
}
http://jsfiddle.net/defmetalhead/9BYrm/1/