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>
Related
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>
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')
}
What I try to achieve:
I'm working on a code, which does fetch categories together with other elements from a database (php & mysql).
These elements/nodes are all in a "<label> ... </label>" for a radio button.
If a user clicks on one of these labels for a radio button, the category name and an img, which are also in the label, should how up ALSO in a other "<div id="selection"> ... </div>".
What does work:
By clicking on a radiobutton/label, I already can fetch the radioButton value (in my case the value must be the the category id).
What doesn't work:
I cant fetch the other elements in this label and display it ALSO in a other span
VERY IMPORTANT!: The content in the labels getting fetched from a database, so it is dynamically!
Here is a simple version of my code without php elements, but the output should be kinda the same.
function check() {
var radioBttn = document.querySelectorAll("input[name = 'pet']");
var countRadioBttn = radioBttn.length;
for (i = 0; i < countRadioBttn; i++) {
if (radioBttn[i].checked) {
selection.innerHTML = "You selected a/n " + radioBttn[i].value + ",<br>good choice!";
}
}
}
*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}
<div id="option">
<b>Option Box</b>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:1">
<span>Cat</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:2">
<span>Dog</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:3">
<span>Hamster</span>
<img src=""></img>
</label>
<br>
<label>
<input onclick="check()" type="radio" name="pet" class="rb_category" value="id:4">
<span>Mammoth</span>
<img src=""></img>
</label>
</div>
<div id="selection">
No selection yet
</div>
Do you mean this?
var rads = document.querySelectorAll("input[name=pet]");
for (var i = 0; i < rads.length; i++) {
rads[i].addEventListener("click", function() {
var parentLabel = this.closest("label");
document.getElementById("selection").innerHTML =
"You selected a/n " + this.value + ",<br>good choice!" +
"<span>" + parentLabel.querySelector("span").innerHTML + "</span>" +
"<img src='" + parentLabel.querySelector("img").src + "'/>";
});
};
*{margin: 0; padding: 0;font-family: arial; font-family: ubuntu; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
b{color: dodgerBlue;}
body{background-color: rgba(50,50,50);}
#option{width: 250px; height: 100px; background-color: rgba(255,255,255,.3); margin: 10px; padding: 10px; color: rgba(255,255,255,.9);}
#selection{ width: 250px; height: 55px; background-color: rgba(100,100,100,.3); margin: 10px; padding: 10px; color: lightgreen;}
label>img { height:25% }
<div id="option">
<b>Option Box</b>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:1">
<span>Cat</span>
<img src="https://lorempixel.com/output/cats-q-c-200-200-5.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:2">
<span>Dog</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-8.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:3">
<span>Rhino</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-1.jpg" />
</label>
<br>
<label>
<input type="radio" name="pet" class="rb_category" value="id:4">
<span>Tiger</span>
<img src="https://lorempixel.com/output/animals-q-c-200-200-3.jpg" />
</label>
</div>
<br style="clear:both" />
<div id="selection">
No selection yet
</div>
Im sorry to open a question, which I am sure many will consider very basic but I don't really know javascript and am learning as my application grows
I have the following
When radio button is clicked I would like the div with class="teams" to change border colour to red.
I came up with this code
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" return border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />
</center>';
function border(){
if(document.getElementById("one").checked){
document.getElementById("teams").style.borderColor="red"
}
else if( document.getElementById("two").checked){
document.getElementById("teams").style.borderColor="red"
}
}
echo'<div class="teams">';
echo'<img src="images/teams/'.$src1.'.png" id="t1" />';
echo'<img src="images/teams/'.$src2.'.png" id="t2" />';
echo'</div>';
Clearly I am doing something wrong. Any help will be greatly appreciated
Following is the error thrown.
teams is a class attribute and not ID.
Change getElementById("teams") to getElementsByClassName("teams")
Note that getElementsByClassName("teams") returns an array of matched elements; so use a loop to set the value of each or just use getElementsByClassName("teams")[0].style.borderColor
function border() {
var el = document.getElementsByClassName("teams")[0];
if (document.getElementById("one").checked || document.getElementById("two").checked) {
el.style.borderColor = "red";
el.style.borderStyle = "solid";
}
}
Try onclick="border(this.id)"
<labe><input type="radio" onclick="border(this.id)" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" border(this.id)" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
function border(id){
if(document.getElementById(id).checked){
document.getElementsByClassName('teams')[0].style.borderColor="red"
}
}
Working demo
In your code teams is a class name and not id.
echo'<div class="teams">';
Either you change it to id:
echo'<div id="teams">';
Or use getElementsByClassName("teams"), it will give you NodeList
document.getElementsByClassName("teams")[0].style.borderColor="red";
Apart from this, you could possibly try this solution just using css pseudo:
input[type=radio].check {
display: none;
}
input[type=radio].check + label.check {
border: 1px solid grey;
padding: 5px 7px;
cursor: pointer;
width: 150px;
display: block;
text-align: center;
margin-bottom: 2px;
}
input[type=radio].check:checked + label.check {
background: red;
}
<input type='radio' name='team' value='Team 1' class='check' id='check1' />
<label for='check1' class='check'>Team 1</label>
<input type='radio' name='team' value='Team2' class='check' id='check2' />
<label for='check2' class='check'>Team 2</label>
<input type='radio' name='team' value='Draw' class='check' id='check3' />
<label for='check3' class='check'>Draw</label>
Just a little tip I would try and get away from using the onclick events and move towards external javascript.
I've created an example of something you could try.
$(':radio').change(function ()
{
if ($(this).val() == "team1")
{
$(".row").css("border-color", "blue");
}
else if ($(this).val() == "team2")
{
$(".row").css("border-color", "red");
}
});
div.row {
border: 2px solid black;
height: 200px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
</div>
<label for="team1">1</label>
<input id="team1" type="radio" name="team1" value="team1">
<label for="team2">2</label>
<input id="team2" type="radio" name="team2" value="team2">
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/