I set a ul of product variants with horizontal scroll.
When i scroll and click on a variant the page refresh and the scroll return to start.
I need to maintain the posistion where it was first of refresh.
How can i do?
ul#group_17 {
width: 150px;
display: flex;
overflow: auto;
list-style: none;
}
li {margin: 0 10px 0 0}
.input-color {
position: absolute;
opacity: 0;
cursor: pointer;
height: 60px;
width: 60px;
}
span {
height: 60px;
width: 60px;
display: block;
}
<ul id="group_17">
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="87">
<span class="color texture" style="background:black"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="88" checked="checked">
<span class="color texture" style="background:brown;"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="89">
<span class="color texture" style="background:red"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="90">
<span class="color texture" style="background:yellow"></span>
</label>
</li>
</ul>
More information is needed
But you can give an ID to the part of your code that you want and when you click, it will be linked to the same part
you can use this code in js
document.location.reload(true)
or use this in js
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
</script>
Related
I am trying to create tree view of multiple checkbox as tree everything working fine I just not being able to achieve goal to when child checkbox been check let its parent checkbox also checked. I find example from
http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html
<div class="form-group form-show-validation row">
<label for="name" class="col-lg-3 col-md-3 col-sm-4 mt-sm-2 text-right">Permissions <span class="required-label">*</span></label>
<div class="acidjs-css3-treeview col-lg-4 col-md-9 col-sm-8">
<ul>
<li>
<input type="checkbox" id="node-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0">Libraries</label>
<ul>
<li>
<input type="checkbox" id="node-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0">Documents</label>
<ul>
<li>
<input type="checkbox" id="node-0-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0">My Documents</label>
<ul>
<li>
<input type="checkbox" id="node-0-0-0-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0-0">Downloads</label>
</li>
<li>
<input type="checkbox" id="node-0-0-0-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0-1">Projects</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-1">Music</label>
<ul>
<li>
<input type="checkbox" id="node-0-1-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-1-0">My Music</label>
</li>
<li>
<input type="checkbox" id="node-0-1-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-1-1">Public Music</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-2" /><label><input type="checkbox" /><span></span></label><label for="node-0-2">Pictures</label>
<ul>
<li>
<input type="checkbox" id="node-0-2-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-2-0">My Pictures</label>
</li>
<li>
<input type="checkbox" id="node-0-2-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-2-1">Public Pictures</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-3" checked="checked" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3">Video</label>
<ul>
<li>
<input type="checkbox" id="node-0-3-0" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3-0">My Videos</label>
</li>
<li>
<input type="checkbox" id="node-0-3-1" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3-1">Public Videos</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Here is javascript code which will be required
<script>
$(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
var
checkbox = $(this),
nestedList = checkbox.parent().next().next(),
nestedListp = checkbox.parent().prev().prev(),
selectNestedListCheckbox = nestedList.find("label:not([for]) input:checkbox");
selectNestedListCheckboxp = nestedListp.find("label:not([for]) input:checkbox");
if(checkbox.is(":checked")) {
return selectNestedListCheckbox.prop("checked", true);
return selectNestedListCheckboxp.prop("checked", true);
}
selectNestedListCheckbox.prop("checked", false);
});
</script>
Here is working demo by Fabien
$(function() {
$('input[type="checkbox"]').change(checkboxChanged);
function checkboxChanged() {
var $this = $(this),
checked = $this.prop("checked"),
container = $this.parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]')
.prop({
indeterminate: false,
checked: checked
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(checked ? 'custom-checked' : 'custom-unchecked');
checkSiblings(container, checked);
}
function checkSiblings($el, checked) {
var parent = $el.parent().parent(),
all = true,
indeterminate = false;
$el.siblings().each(function() {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
});
if (all && checked) {
parent.children('input[type="checkbox"]')
.prop({
indeterminate: false,
checked: checked
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(checked ? 'custom-checked' : 'custom-unchecked');
checkSiblings(parent, checked);
}
else if (all && !checked) {
indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;
parent.children('input[type="checkbox"]')
.prop("checked", checked)
.prop("indeterminate", indeterminate)
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));
checkSiblings(parent, checked);
}
else {
$el.parents("li").children('input[type="checkbox"]')
.prop({
indeterminate: true,
checked: false
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass('custom-indeterminate');
}
}
});
* { margin: 0; padding: 0; }
#page-wrap {
margin: auto 0;
}
.treeview {
margin: 10px 0 0 20px;
}
ul {
list-style: none;
}
.treeview li {
background: url(http://jquery.bassistance.de/treeview/images/treeview-default-line.gif) 0 0 no-repeat;
padding: 2px 0 2px 16px;
}
.treeview > li:first-child > label {
/* style for the root element - IE8 supports :first-child
but not :last-child ..... */
}
.treeview li.last {
background-position: 0 -1766px;
}
.treeview li > input {
height: 16px;
width: 16px;
/* hide the inputs but keep them in the layout with events (use opacity) */
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.treeview li > label {
background: url(https://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
/* move left to cover the original checkbox area */
margin-left: -20px;
/* pad the text to make room for image */
padding-left: 20px;
}
/* Unchecked styles */
.treeview .custom-unchecked {
background-position: 0 -1px;
}
.treeview .custom-unchecked:hover {
background-position: 0 -21px;
}
/* Checked styles */
.treeview .custom-checked {
background-position: 0 -81px;
}
.treeview .custom-checked:hover {
background-position: 0 -101px;
}
/* Indeterminate styles */
.treeview .custom-indeterminate {
background-position: 0 -141px;
}
.treeview .custom-indeterminate:hover {
background-position: 0 -121px;
}
<div id="page-wrap">
<h2>Treeview with Custom Checkboxes and Indeterminate State</h2>
<ul class="treeview">
<li>
<input type="checkbox" name="tall" id="tall">
<label for="tall" class="custom-unchecked">Tall Things</label>
<ul>
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1" class="custom-unchecked">Buildings</label>
</li>
<li>
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2" class="custom-unchecked">Giants</label>
<ul>
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1" class="custom-unchecked">Andre</label>
</li>
<li class="last">
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2" class="custom-unchecked">Paul Bunyan</label>
</li>
</ul>
</li>
<li class="last">
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3" class="custom-unchecked">Two sandwiches</label>
</li>
</ul>
</li>
<li class="last">
<input type="checkbox" name="short" id="short">
<label for="short" class="custom-unchecked">Short Things</label>
<ul>
<li>
<input type="checkbox" name="short-1" id="short-1">
<label for="short-1" class="custom-unchecked">Smurfs</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2">
<label for="short-2" class="custom-unchecked">Mushrooms</label>
</li>
<li class="last">
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3" class="custom-unchecked">One Sandwich</label>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="main.js"></script>
Since my first answer below, I have developed a Hybrid HTML Dropdown plugin to solve the general case problem of checked lists and nested lists as well as the option to create thumbnail based check lists fields. So the above problem can now be solved with the following html/js,
function docReady(fn) {
if (document.readyState!='loading'){
fn();
}else if (document.addEventListener){
document.addEventListener('DOMContentLoaded', fn);
}
}
docReady( (e)=>{
let sel= document.querySelector('#nested-list');
let hyd = new HybridDropdown(sel,{});
});
<link href="https://aurovrata.github.io/hybrid-html-dropdown/assets/css/hybrid-dropdown.css" rel="stylesheet"/>
<script src="https://aurovrata.github.io/hybrid-html-dropdown/assets/js/hybrid-dropdown.js"></script>
<div id="nested-list" data-tree-view="true" data-color="#ff26ffc9"
data-background-color="#454d4f">
<script type="application/json">
{
"":"Select a dish",
"Japan":{
"sushi":{
"label":"Sushi",
"ps":"Pumpkin sushi",
"as":"Avocado sushi",
"tc":"Tomato sushi",
"cs":"Carrot sushi"
}
},
"India":{
"dosa":{
"label":"Dosa",
"pd":"Plain dosa",
"md":"Masala dosa",
"myd":"Mysore dosa",
"pr":"Paper roast"
}
}
}
</script>
</div>
enter image description hereI need to create checkbox structure with the following conditions:-
When a parent checkbox is selected, all child checkboxes should get selected automatically.
If all child checkboxes are unselected, then the parent checkbox should get unchecked automatically.
If single child checkboxes are selected, then the parent checkbox should get selected automatically.
...this is how it should look like : -[this is how it should look like
this is my code. But it doesn't seems to satisfy 2nd condition. I think my logic is right but somewhere there is syntax problem. Please explain the changes you suggest or make. Thanks a ton in advance.
<!DOCTYPE html>
<html>
<head>
<title>jquery3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="#"></script>
<style>
.col-md-3.mx-auto.my-3.d-block.px-0 {
border: 1px solid;
border-color: #eeeeee;
}
.col-md-3.mx-auto.my-3.d-block .header {
background: linear-gradient(#f1f1f1, #fff);
border-bottom: 1px solid #eeeeee;
color: #616161;
letter-spacing: 1px;
padding-top: 2px;
padding-left: 18%;
font-family: Georgia;
font-weight: bold;
/* height: 9%; */
padding-bottom: 2px;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down {
padding-top: 4%;
padding-left: 6%;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
background: #fff;
border: 2px solid #f1f1f1;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
.col-md-3.mx-auto.my-3.d-block .selecter {
padding-top: 4%;
padding-left: 6%;
color: #464f44;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
#submitbtn {
margin-top: 4%;
margin-left: 6%;
margin-bottom: 4%;
/* height: 23px; */
width: 72px;
background: linear-gradient(#fff, #f1f1f1);
/* font-size: 13px; */
font-family: Georgia;
}
.OU {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 mx-auto my-3 d-block px-0">
<div class="header">Manage Permission</div>
<div class="Drop-down">
<select name="dropdown" class="drop-down">
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
</select>
</div>
<div class="selecter">
<div class="Property">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Property</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Property</label>
</li>
</ul>
</div>
<div class="Testimonial">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Organic Updates</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Add</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit</label>
</li>
</ul>
</div>
<div class="Users">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Users</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit User</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View User List</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add_User</label>
</li>
</ul>
</div>
<div class="Membership">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Membership</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Membership</label>
</li>
</ul>
</div>
</div>
<button type="submit" id="submitbtn" name="submitbtn">Submit</button>
</div>
</div>
<!--$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});--->
<script>
$(document).ready(function(){
$('.parchek').click(function() {
$(this).parents().siblings("ul").find("input").prop('checked', this.checked);
});
//$("input").click(function() {
//$(this).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
//});
$('.selecter').find('input').each(function(index, input) {
$("input").on("change", function(){
var checkbox = $(this);
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
}else{
var checkbox = $(this).parents("li").siblings("li").find("input");
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);}
else{
$(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');
}
}
});
});
});
</script>
<!--else{
// var checkbox = $(this).parents("li").siblings("li").find("input");
// var is_checked = $(checkbox).is(':checked');
// if(is_checked) {
// $(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);}else{
// $(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');
/// }
// }}
// });
// });--->
</body>
</html>
I'd add a class to the group and to the child checkboxes for easier selection.
Your parent selector function is good, though I wrote it as below. The child selector function should update based on if any boxes are ticked or not; you can use the .length property to get the number of checked child boxes.
Jsfiddle
$(document).ready(function() {
//check/uncheck any siblings
$('.selecter input.parchek').click(function() {
$(this).closest("div.checkgroup").find(".childchek").prop("checked", this.checked);
});
//check/uncheck parent
$('.selecter input.childchek').click(function() {
var numChecked = $(this).closest("div.checkgroup").find(".childchek:checked").length;
$(this).closest("div.checkgroup").find(".parchek").prop("checked", (numChecked > 0));
});
});
You had two errors:
This was not returning the correct valuevar is_checked = $(checkbox).is(':checked');, instead you could have used the already defined checkbox element checkbox.is(':checked');
Instead of using .removeAttr() in $(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked'); you chould have used .prop('checked', false);
Corrected code below:
$(document).ready(function() {
$('.parchek').click(function() {
$(this).parents().siblings("ul").find("input").prop('checked', this.checked);
});
$('.selecter').find('input').each(function(index, input) {
$(this).on("change", function() {
var checkbox = $(this);
var is_checked = checkbox.is(':checked');
if (is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
} else {
let checkboxes = $(this).parents("ul").find("input");
if (allCheckBoxesUnChecked(checkboxes)) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', false);
}
}
});
});
// helper function that checks if all checkboxes are unchecked
function allCheckBoxesUnChecked(elems) {
let allUnchecked = true;
$.each(elems, function(ind, item) {
if (item.checked) {
allUnchecked = false;
return;
}
});
return allUnchecked;
}
});
.col-md-3.mx-auto.my-3.d-block.px-0 {
border: 1px solid;
border-color: #eeeeee;
}
.col-md-3.mx-auto.my-3.d-block .header {
background: linear-gradient(#f1f1f1, #fff);
border-bottom: 1px solid #eeeeee;
color: #616161;
letter-spacing: 1px;
padding-top: 2px;
padding-left: 18%;
font-family: Georgia;
font-weight: bold;
/* height: 9%; */
padding-bottom: 2px;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down {
padding-top: 4%;
padding-left: 6%;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
background: #fff;
border: 2px solid #f1f1f1;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
.col-md-3.mx-auto.my-3.d-block .selecter {
padding-top: 4%;
padding-left: 6%;
color: #464f44;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
#submitbtn {
margin-top: 4%;
margin-left: 6%;
margin-bottom: 4%;
/* height: 23px; */
width: 72px;
background: linear-gradient(#fff, #f1f1f1);
/* font-size: 13px; */
font-family: Georgia;
}
.OU {
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>jquery3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="#"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 mx-auto my-3 d-block px-0">
<div class="header">Manage Permission</div>
<div class="Drop-down">
<select name="dropdown" class="drop-down">
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
</select>
</div>
<div class="selecter">
<div class="Property">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Property</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Property</label>
</li>
</ul>
</div>
<div class="Testimonial">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Organic Updates</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Add</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit</label>
</li>
</ul>
</div>
<div class="Users">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Users</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit User</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View User List</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add_User</label>
</li>
</ul>
</div>
<div class="Membership">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Membership</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Membership</label>
</li>
</ul>
</div>
</div>
<button type="submit" id="submitbtn" name="submitbtn">Submit</button>
</div>
</div>
</body>
</html>
I make my own star rating with html css, but it is not working true. If i use direction: rtl or float: right it works but i can't use rtl or float:right because of php.
How can i make it with pure css and html?
$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});
.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>
Starting to your HTML, I tried to reverse the color's change 'cause in pure CSS + & ~ works only on next elements. Then why you don't make the next a gray and not blue?
I tried to play only with your CSS, but I had to add also a class to span to work with active situation. Sorry :P
This is the result:
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});
.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>
Hope it helps! :)
This uses radio buttons to achieve the effect
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></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="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 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="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 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="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
https://codepen.io/jamesbarnett/pen/vlpkh
Simple star rating with pure javascript.
HTML
<div id="rating_bar"> </div>
CSS
#rating_bar {
width:100px;
height:100px;
display:inline-block;
display:inline;
}
Javascript
var content ='';
for(var i=1;i<=5;i++)
content += ' <span id="rate_'+i+'">✰</span> ';
document.getElementById('rating_bar').innerHTML=content;
var spans = document.getElementById("rating_bar")
.getElementsByTagName('span');
for(i=0;i<spans.length;i++)
spans[i].onmouseover=hoverStar;
function hoverStar()
{
for(i=0;i<this.id.charAt(5);i++)
spans[i].innerText='⭐';
for(i=this.id.charAt(5);i<5;i++)
spans[i].innerText='✰';
}
Sample Output:
HTML
<div class="rating" tabindex="1" onblur="calculateRating(this)">
<i class="fa fa-star-o" aria-hidden="true" value="1" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="2" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="3" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="4" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="5" onclick="clickStar(this)"></i>
</div>
<div class="rating-display"></div>
CSS
.clicked{
color:yellow;}
JAVASCRIPT
var rating = document.querySelector(".rating");
var ratingDisplayEle = document.querySelector(".rating-display");
//add event listener
function clickStar(ele){
var clickedStar = ele;
//value of the star
var ratingValue = parseInt(clickedStar.getAttribute("value"));
//change the color of the star
for(var i=0; i<ratingValue; i++){
rating.children[i].classList.add("clicked");
for(var j=ratingValue; j<=4; j++){
if(rating.children[j].classList.contains("clicked")){
rating.children[j].classList.remove("clicked");
}
}
}
}
//function to calculate rating
function calculateRating(ele){
//check how many elements are having clicked class
var ratingCount = 0;
for(var i=0; i<ele.children.length; i++){
if(ele.children[i].classList.contains("clicked")){
ratingCount++;
}
}
ratingDisplayEle.textContent = `You have selected ${ratingCount} rating out of 5`;
}
Simple star rating
function myFunction() {
var five = document.getElementById('1-star').checked;
document.getElementById("one").innerHTML = five;
}
/* component */
.star-rating {
display:flex;
flex-direction: row-reverse;
font-size:3em;
justify-content:space-around;
padding:0 .2em;
text-align:center;
width:5em;
}
.star-rating input {
display:none;
}
.star-rating label {
color:#ccc;
cursor:pointer;
}
.star-rating :checked ~ label {
color:#f90;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
color:#fc0;
}
<div class="star-rating">
<input type="radio" id="5-stars" name="rating" value="5" />
<label for="5-stars" class="star">★</label>
<input type="radio" id="4-stars" name="rating" value="4" />
<label for="4-stars" class="star">★</label>
<input type="radio" id="3-stars" name="rating" value="3" />
<label for="3-stars" class="star">★</label>
<input type="radio" id="2-stars" name="rating" value="2" />
<label for="2-stars" class="star">★</label>
<input type="radio" id="1-star" name="rating" value="1" />
<label for="1-star" class="star">★</label>
</div>
<p id="one" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
I am trying to select the text, on text select or list select the radio button should be selected automatically by the jquery code but its looping between the last two radio buttons only
note: i want only one selection should be made between 5 radio button on list selection
Here is my code:
$('.saved_card .customerid').click(function() {
$('.glyphicon-ok').removeClass('glyphicon-ok');
$('.saved_card .selected_radio').removeClass('selected_radio');
$("i", this).toggleClass('glyphicon-ok');
$(this).toggleClass('selected_radio');
$('input[type="radio"]').not(':checked').prop("checked", true);
});
And my jsfiddle is here.
Please use HTML5 label element like this:
<ul class="saved_card">
<li class="customerid">
<label for="cust1">Savings account-***4443<i class="form-control-feedback glyphicon"></i></label>
<input type="radio" name="customer" value="cust1" id="cust1">
</li>
<li class="customerid">
<label for="cust2">Savings account-***4443<i class="form-control-feedback glyphicon"></i></label>
<input type="radio" name="customer" value="cust2" id="cust2">
</li>
</ul>
You don't need javascript to do this.
Yes, you can use label tag like André Senra says
$('.saved_card .customerid').click(function() {
$('.glyphicon-ok').removeClass('glyphicon-ok');
$(this).addClass('glyphicon-ok');
$('.selected_radio').removeClass('selected_radio');
$(this).addClass('selected_radio');
$('input[type="radio"]').prop("checked", false);
$(this).find('input[type="radio"]').prop("checked", true);
});
ul.saved_card li i {
height: 48px;
line-height: 48px;
font-size: 17px;
font-weight: lighter;
margin-right: 10px;
color: #f00f64;
}
ul.saved_card li {
height: 50px;
border: 0;
border-bottom: 1px solid #fafafa;
background-color: #fff;
border-radius: 0;
box-shadow: none;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="saved_card">
<li class="customerid">
<input type="radio" name="customer" value="cust1" id="cust1">Savings account-***4443<i class="form-control-feedback glyphicon"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust2" id="cust2" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust3" id="cust3" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust4" id="cust4" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust5" id="cust5" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
</ul>
And jsfiddle is here
https://jsfiddle.net/svp4msfu/1/
Change last line to this:
$('input[type="radio"]', $(this)).not(':checked').prop("checked", true);
Though you should rather do as Andre suggests, and use a label.
I have radio button inside li element,
I would like to change the background color of the li (the parent div) once the radio button checked. I succeeded to set hover on the li by CSS, but it seems like the :checked not works on parent div.
This is my html + css code:
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category"><label class="selectit"><input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label></li>
<li id="job_listing_category-73"><label class="selectit"><input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label></li>
<li id="job_listing_category-75"><label class="selectit"><input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label></li>
<li id="job_listing_category-76"><label class="selectit"><input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label></li>
<li id="job_listing_category-80"><label class="selectit"><input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label></li>
<li id="job_listing_category-86"><label class="selectit"><input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label></li>
<li id="job_listing_category-98"><label class="selectit"><input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label></li>
</ul>
</div>
I will appreciate any help about this issue,
Thanks
While you've already accepted an answer I'd suggest, if using plain – non-library – JavaScript is preferred, the following:
// named function to handle the changes:
function toggleParentStyle(opts) {
// the default settings:
var settings = {
// activeClass: String, the class-name by
// which the 'active'/'on' state is denoted:
'activeClass': 'active',
// targetElementSelector: String,
// the CSS selector to identify the elements
// whose style is to be altered:
'targetElementSelector': 'li',
// uniquelyActive: Boolean, determines
// whether only one element can have the
// 'active' state/'activeClass' class-name:
'uniquelyActive' : true
},
// caching the 'this' Node:
trigger = this;
// iterating over the (possibly) passed-in opts
// Object that can be used to override the
// default settings:
for (var prop in opts) {
// if the opts Object has prop as an
// own-property (one not inherited from
// the Object's prototype):
if (opts.hasOwnProperty(prop)) {
// we update the relevant property of
// the settings Object to be equal to
// that of the opts Object:
settings[prop] = opts[prop];
}
}
// caching the targetElementSelector and activeClass
// with shorter names (for convenience):
var selector = settings.targetElementSelector,
c = settings.activeClass,
// caching the closest ancestor of the element
// triggering the function that matches the
// selector:
ancestor = trigger.closest(selector),
// finding the currently-active element (if any),
// moving from the found ancestor element:
selectedSibling = ancestor
// to its parentNode:
.parentNode
// finding the first/only element in that
// parent element that matches the selector
// and has the class-name:
.querySelector(selector + '.' + c);
// if settings.uniquelyActive is true, and
// there is a selected-sibling:
if (settings.uniquelyActive && selectedSibling) {
// we remove the class-name:
selectedSibling.classList.remove( c );
}
// here we access the ancestor element's classList,
// and if the ancestor.classList.contains the class-name
// (Boolean true) we use the 'remove' method, if it does not
// contain the class-name (Boolean false) we use the 'add'
// method, and pass the class-name as an argument:
ancestor.classList[ancestor.classList.contains( c ) ? 'remove' : 'add'](c);
// Note: for radio inputs this isn't necessary, as a radio
// can't be changed by clicking it, but this might be a
// necessary check were check-box inputs to be used instead.
}
// finding all the radio-inputs in the document:
var radios = document.querySelectorAll('input[type=radio]'),
// converting the HTMLCollection into an Array, using
// Array.prototype.slice and Function.prototype.call():
radiosArray = Array.prototype.slice.call(radios, 0);
// iterating over the radiosArray using Array.prototype.forEach():
radiosArray.forEach(function(radio) {
// binding the toggleParentStyle to handle the change
// event of the radio inputs:
radio.addEventListener('change', toggleParentStyle);
});
function toggleParentStyle(opts) {
var settings = {
'activeClass': 'active',
'targetElementSelector': 'li',
'uniquelyActive': true
},
trigger = this;
for (var prop in opts) {
if (opts.hasOwnProperty(prop)) {
settings[prop] = opts[prop];
}
}
var selector = settings.targetElementSelector,
ancestor = trigger.closest(selector),
c = settings.activeClass,
selectedSibling = ancestor
.parentNode
.querySelector(selector + '.' + c);
if (settings.uniquelyActive && selectedSibling) {
selectedSibling.classList.remove(c);
}
ancestor.classList[ancestor.classList.contains(c) ? 'remove' : 'add'](c);
}
var radios = document.querySelectorAll('input[type=radio]'),
radiosArray = Array.prototype.slice.call(radios, 0);
radiosArray.forEach(function(radio) {
radio.addEventListener('change', toggleParentStyle);
});
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
li.active {
background-color: limegreen;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
JS Fiddle demo
To show the above using radio <input> elements, but passing in different settings:
radiosArray.forEach(function(radio) {
radio.addEventListener('change', function () {
// using Function.prototype.call()
// to set the function's 'this' (the radio input),
// and passing an Object as the second argument to
// contain the Opts Object:
toggleParentStyle.call(this, {
// allowing multiple elements to be styled as active:
'uniquelyActive' : false,
// passing in a different class-name:
'activeClass' : 'anAlternativeClassName'
});
});
});
function toggleParentStyle(opts) {
var settings = {
'activeClass': 'active',
'targetElementSelector': 'li',
'uniquelyActive': true
},
trigger = this;
for (var prop in opts) {
if (opts.hasOwnProperty(prop)) {
settings[prop] = opts[prop];
}
}
var selector = settings.targetElementSelector,
ancestor = trigger.closest(selector),
c = settings.activeClass,
selectedSibling = ancestor
.parentNode
.querySelector(selector + '.' + c);
if (settings.uniquelyActive && selectedSibling) {
selectedSibling.classList.remove(c);
}
ancestor.classList[ancestor.classList.contains(c) ? 'remove' : 'add'](c);
}
var radios = document.querySelectorAll('input[type=radio]'),
radiosArray = Array.prototype.slice.call(radios, 0);
radiosArray.forEach(function(radio) {
radio.addEventListener('change', function () {
toggleParentStyle.call(this, {
'uniquelyActive' : false,
'activeClass' : 'anAlternativeClassName'
});
});
});
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
li.active {
background-color: limegreen;
}
li.anAlternativeClassName {
background-color: #f90;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
JS Fiddle demo.
And showing how it might be used for check-boxes:
// selecting inputs of type=checkbox:
var checkboxes = document.querySelectorAll('input[type=checkbox]'),
// convert checkboxes HTMLCollection to an Array:
checkboxArray = Array.prototype.slice.call(checkboxes, 0);
// exactly as above, but passing in different elements:
checkboxArray.forEach(function(check) {
check.addEventListener('change', function () {
toggleParentStyle.call(this, {
// ensuring multiple checkbox ancestors can be
// selected:
'uniquelyActive' : false,
'activeClass' : 'anAlternativeClassName'
});
});
});
function toggleParentStyle(opts) {
var settings = {
'activeClass': 'active',
'targetElementSelector': 'li',
'uniquelyActive': true
},
trigger = this;
for (var prop in opts) {
if (opts.hasOwnProperty(prop)) {
settings[prop] = opts[prop];
}
}
var selector = settings.targetElementSelector,
ancestor = trigger.closest(selector),
c = settings.activeClass,
selectedSibling = ancestor
.parentNode
.querySelector(selector + '.' + c);
if (settings.uniquelyActive && selectedSibling) {
selectedSibling.classList.remove(c);
}
ancestor.classList[ancestor.classList.contains(c) ? 'remove' : 'add'](c);
}
var checkboxes = document.querySelectorAll('input[type=checkbox]'),
checkboxArray = Array.prototype.slice.call(checkboxes, 0);
checkboxArray.forEach(function(check) {
check.addEventListener('change', function() {
toggleParentStyle.call(this, {
'uniquelyActive': false,
'activeClass': 'anAlternativeClassName'
});
});
});
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
li.active {
background-color: limegreen;
}
li.anAlternativeClassName {
background-color: #f90;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
JS Fiddle demo.
References:
Array.prototype.forEach().
Array.prototype.slice().
Document.querySelector().
Document.querySelectorAll().
Element.classList.
Element.closest().
EventTarget.addEventListener().
for...in.
Function.prototype.call().
Node.parentNode.
Object.hasOwnProperty().
This should do it:
function updateHighlightRadio() {
var selected = this.parentNode.parentNode.parentNode.getElementsByClassName("selected")[0];
if (selected) selected.className = selected.className.replace(" selected", "");
this.parentNode.parentNode.className += " selected";
}
function updateHighlightCheckbox() {
var selected = this.parentNode.parentNode;
if (!this.checked)
selected.className = selected.className.replace(" selected", "");
else
this.parentNode.parentNode.className += " selected";
}
window.onload = function () {
var radios = document.querySelectorAll("input[type=radio]");
for (var i = 0; i < radios.length; ++i) {
radios[i].onchange = updateHighlightRadio;
}
var checkboxes = document.querySelectorAll("input[type=checkbox]");
for (var i = 0; i < checkboxes.length; ++i) {
checkboxes[i].onchange = updateHighlightCheckbox;
}
}
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
.job-manager-term-checklist .selected {
background-color: #a2156b;
color: #fff;
}
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category">
<label class="selectit">
<input value="72" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label>
</li>
<li id="job_listing_category-73">
<label class="selectit">
<input value="73" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label>
</li>
<li id="job_listing_category-75">
<label class="selectit">
<input value="75" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label>
</li>
<li id="job_listing_category-76">
<label class="selectit">
<input value="76" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label>
</li>
<li id="job_listing_category-80">
<label class="selectit">
<input value="80" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label>
</li>
<li id="job_listing_category-86">
<label class="selectit">
<input value="86" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label>
</li>
<li id="job_listing_category-98">
<label class="selectit">
<input value="98" type="checkbox" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label>
</li>
</ul>
</div>
You can create a javascript file and change the class of the element like eg:
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
You will have to change your <li> to eg:
<li id="job_listing_category-98"><label class="selectit"><input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98" onclick="changeClass(this, "someClass")">7</label></li>
Hope this will point you in the right direction
If I'm understanding your problem correctly, you could do it like this:
form input[type="radio"]:checked + label {
background-color: yellow;
}
http://jsfiddle.net/4pf9cds3/
(Source: Changing background color with CSS on radio button input when :checked )
You can make like this
$('input[type=radio]').on('change', function() {
$('li').each(function(){
$(this).removeClass('active');
});
if($(this).prop('checked')) {
$(this).parent().parent().addClass('active');
}
});
.job-manager-term-checklist {
margin: 1em 0 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.job-manager-term-checklist li {
border: 1px solid #ccc;
overflow: auto;
padding: 5px;
margin-left: 5px;
border-radius: 5px;
background-color: #ebf1f9;
width: 20%;
}
.job-manager-term-checklist li:hover {
background-color: #4e83ca;
color: #fff;
}
.active {
background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field required-field">
<ul class="job-manager-term-checklist job-manager-term-checklist-job_category">
<li id="job_listing_category-72" class="popular-category"><label class="selectit"><input value="72" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-72">1</label></li>
<li id="job_listing_category-73"><label class="selectit"><input value="73" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-73">2</label></li>
<li id="job_listing_category-75"><label class="selectit"><input value="75" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-75">3</label></li>
<li id="job_listing_category-76"><label class="selectit"><input value="76" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-76">4</label></li>
<li id="job_listing_category-80"><label class="selectit"><input value="80" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-80">5</label></li>
<li id="job_listing_category-86"><label class="selectit"><input value="86" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-86">6</label></li>
<li id="job_listing_category-98"><label class="selectit"><input value="98" type="radio" name="tax_input[job_listing_category][]" id="in-job_listing_category-98">7</label></li>
</ul>
</div>
Just use this small code :
$('input[name*="tax_input"]').change(function() {
if($(this).is(':checked')) { // Input is checked
$(this).parent().css('background', 'red');
} else {
$(this).parent().css('background', 'white');
}
});
The bad news is you can't do that with CSS only, because of how CSS selectors work.
The good news is, you can do something very close to what you want with CSS only by selecting a sibling of the input, make it cover the whole of the parent and change its bg color.