We Keep Coding

How can I use Javascript to apply CSS to multiple buttons when one is clicked?

I have a survey page where users can click buttons on a scale from 1-5 to say how their experience was. Currently, clicking one button (say 3 out of 5) will change the background color of that one button to indicate it was clicked. What is the best way to approach this if I want to have all buttons have the updated background color up to whatever was clicked? Example: If they click "3" out of 5 then it would highlight buttons 1, 2, and 3.
Any help appreciated.
HTML:
<section class="l-reviews pt-30 pb-15">
<div class="contain">
<div class="row">
<div class="col-md-12">
<div class="reviews-wrapper">
<div class="reviews-top-header">
<p id="">Thank you for taking part. Please complete this survey to let us know how we’re
doing.</p>
<p>Please rate the following on a 1-5 scale (1 = Least, 5 = Most)</p>
</div>
<div class="reviews-body">
<form method='post' name='front_end' action="">
<div class="form-control">
<p>1. Were the payroll process and benefits options explained to you fully?</p>
<div class="input-holder">
<input type='hidden' name='title' value='' />
<input type='hidden' name='email' value='' />
<input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label>
<input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label>
<input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label>
<input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label>
<input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label>
</div>
</div>
<button type="button" class="send-btn">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Javascript:
$('.send-btn').click(function(e) {
e.preventDefault();
let checkOne = false;
let checkTwo = false;
let checkThree = false;
let checkFour = false;
let checkFive = false;
CSS:
#wr-1:checked+label,
#application-rating-1:checked+label,
#goals-rating-1:checked+label,
#refer-rating-1:checked+label,
#sat-1:checked+label {
background: url('/wp-content/themes/theme52950/images/reviews-faces/1-hover.png');
height: 55px;
width: 109px;
display: inline-block;
padding: 0 0 0 0px;
background-repeat: no-repeat;
}

Native checkboxes can't be styled, so you can't easily add a checked appearance to an unchecked checkbox. You can however hide the native appearance, and do some CSS trickery to show a checkbox with round border.
With this you can use jQuery (or native JS) to add a checked appearance to round borders, here to all checkboxes preceding the current one:
$(function() {
$('.form-control input[type="radio"]').click(function(e) {
let $el = $(this);
console.log('clear all highlights');
$el.parent().find('input[type="radio"]').css({ backgroundColor: '#FF572233' });
let id = $el.attr('id');
do {
if(id) {
console.log('highlight', id);
$el.css({ backgroundColor: '#993333' });
}
$el = $el.prev().prev();
id = $el.attr('id');
} while(id);
});
});
.form-control input[type="radio"] {
height: 0.9rem;
width: 0.9rem;
margin-right: 0.5rem;
/* The native appearance is hidden */
appearance: none;
-webkit-appearance: none;
/* For a circular appearance we need a border-radius. */
border-radius: 50%;
/* The background will be the radio dot's color. */
background: #FF572233;
/* The border will be the spacing between the dot and the outer circle */
border: 3px solid #FFF;
/* And by creating a box-shadow with no offset and no blur, we have an outer circle */
box-shadow: 0 0 0 1px #FF5722;
}
.form-control input[type="radio"]:checked {
background: #993333;
}
.send-btn {
margin-top: 15px;
}
.as-console-wrapper { max-height: 85px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="l-reviews pt-30 pb-15"> <div class="contain"> <div class="row"> <div class="col-md-12"> <div class="reviews-wrapper"> <div class="reviews-body"> <form method='post' name='front_end' action=""> <div class="form-control"> <p>1. Were the payroll process and benefits options explained to you fully?</p> <div class="input-holder"> <input type='hidden' name='title' value='' /> <input type='hidden' name='email' value='' /> <input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label> <input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label> <input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label> <input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label> <input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label> </div> </div> <button type="button" class="send-btn">Submit</button> </form> </div> </div> </div> </div> </div> </section>

Turn CheckBoxes into CheckButtons

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>

On select radio button show div jquery

I am using three radio button for showing three different divs. But it is not working.
here is my script
<script>
$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Cars" + test).show();
});
});
</script>
Here is my js-fiddle of demo of my work :
http://jsfiddle.net/sam050/PHu99/

Try this
HTML
<div class="usertype">
<ul>
<li id="userpr">
<label>I want to:</label>
<input type="radio" name="Want_To" value="sell" id="Sell" checked />
<label class="new-label selected" for="Sell">Sell</label>
<input type="radio" name="Want_To" value="rent" id="Rent/Lease" />
<label class="new-label" for="Rent/Lease">Rent/Lease</label>
<input type="radio" name="Want_To" value="PG" id="Want-To-PG" />
<label class="new-label" for="Want-To-PG">PG</label>
</li>
</ul>
<div id="sell">Show sell div</div>
<div id="rent">Show rent div</div>
<div id="PG">Show PG div</div>
</div>
Script
$(document).ready(function() {
$("#sell,#rent,#PG").hide();
$("input[name$='Want_To']").click(function() {
var test = $(this).attr('value'); console.log(test)
$("#"+test).show().siblings('div').hide();
});
});
DEMO

.usertype{ border-bottom: 1px solid #E3E3E3; padding: 15px 12px;}
.usertype ul{margin-top:0px;}
.usertype ul li{margin-bottom:15px;}
.usertype ul li label{margin: 0px 15px 0px; width:160px;display:inline-block;vertical-align: top;background: none;
border: none; color: #666;}
.usertype input[type="radio"]:checked + .new-label{ color:#2C96D0 !important; border-color:#2c97d3; background:#2C96D0; }
.usertype ul li label.new-label {
width: auto;
margin-left: 15px;
color: #9E9E9E;
display: inline-block;
font: 700 13px/31px Open Sans Bold,Arial,Helvetica,sans-serif;
padding: 0px 10px;
background: linear-gradient(to bottom, #E8E8E8 0%, #FFF 100%) repeat scroll 0% 0% transparent;
border: 1px solid #D6D6D6;
border-radius: 5px;}
.usertype input {
margin-right: -30px;
}
#sell,#rent,#PG
{
display:none;
}
and your js
$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
$('#sell,#rent,#PG').hide();
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
I have used little bit different approach here
Chec here demo Demo

You need to change the values of your radio-elements according to your div,
Also make a common class for all div containers, so that only one div would be shown at a time,
Try t like,
$(document).ready(function () {
$(".item-div").hide();
// show checked radio div
$('#'+$('[name="Want_To"]:checked').val()).show();
$("input[name='Want_To']").click(function () {
var test = $(this).val();
$(".item-div").hide();
$("div.desc").hide();
$("#" + test).show();
});
});
Live Demo

first add jquery on yopur page
then HTML would be
<div class="usertype">
<ul>
<li id="userpr"><label>I want to:</label>
<input type="radio" name="Want_To" value="sell" checked /><label class="new-label selected" for="Sell">Sell</label>
<input type="radio" name="Want_To" value="rent" /><label class="new-label" for="Rent/Lease">Rent/Lease</label>
<input type="radio" name="Want_To" value="PG" /><label class="new-label" for="Want-To-PG">PG</label> </li>
<div id="sell" class="desc">
Show sell div
</div>
<div id="rent" class="desc">
Show rent div
</div>
<div id="PG" class="desc">
Show PG div
</div>
</ul>
</div>
and javascript code would be
$(document).ready(function(){
$("input[type='radio']").change(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});

Updated script and Add Jquery
$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
and updated html
<div class="usertype">
<ul>
<li id="userpr"><label>I want to:</label>
<input type="radio" name="Want_To" value="sell" id="Sell" checked /><label class="new-label selected" for="Sell">Sell</label>
<input type="radio" name="Want_To" value="rent" id="Rent/Lease" /><label class="new-label" for="Rent/Lease">Rent/Lease</label>
<input type="radio" name="Want_To" value="PG" id="Want-To-PG" /><label class="new-label" for="Want-To-PG">PG</label> </li>
<div id="sell" class="desc" style="display:none">
Show sell div
</div>
<div id="rent" class="desc" style="display:none">
Show rent div
</div>
<div id="PG" class="desc" style="display:none">
Show PG div
</div>
</ul>
</div>
I hope this will work for you Good Luck!

Try this Fiddle.
$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
var test = $(this).val();
console.log("#"+test);
$(".a").hide();
$("#"+test).show();
});
});

How to limit checkbox selection to one using jquery or javascript

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/

CSS,HTML formatting in a form

I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>
​

You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.

Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.