I am trying to implement a filter. When a checkbox is checked, and after submitting, the checked values should display in the div with a Clear all button and an X button to remove separately, as shown in the image.
Can anybody help me.
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').show("slide");
});
});
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
/******************************************/
$(function() {
$('input[type="checkbox"]').click(
function() {
// if($(this).is(":checked")){
// $("#div ul").append("<li> value <a href='javascript:void(0);' class='remove'>×</a></li>");
// }
value = $(this).val();
if ($(this).is(':checked')) {
$('<li></li>').appendTo('#div ol').text($(this).val());
} else {
value = $(this).val();
if ($('#div ol').has('li:contains("' + value + '")')) {
$('#div ol li:contains("' + value + '")').remove();
}
}
});
});
/******************************************/
/******************************************/
.filter-section .container {
margin-right: 100px;
margin-left: 100px;
padding: 0px;
height: 24px;
}
.filter-section #showmenu {
margin: 0px;
margin-right: 34px;
}
.filter-section #showmenu p {
color: #3f3f3f;
font-size: 18px;
font-weight: 600px;
margin: 0px;
padding: 0px;
}
.filter-section .menu .nav {
border-left: 1px solid #3f3f3f;
}
.filter-section .nav {
display: block;
margin: 0;
padding: 0;
height: 24px;
}
.filter-section .nav li {
display: inline-block;
list-style: none;
}
.filter-section .menu .nav .button-dropdown {
position: relative;
margin-left: 24px;
height: 24px;
}
.filter-section .menu .nav li a {
color: #000;
background-color: #fff;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.filter-section .menu .nav li a span {
font-size: 26px;
line-height: 0;
height: 24px;
margin-right: 10px;
}
.filter-section .menu .nav li .dropdown-toggle::after {
display: inline-block;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 0px;
margin-left: 22px;
text-align: left;
width: 224px;
padding: 10px 24px;
}
.filter-section .menu .nav li .dropdown-menu div {
border-bottom: 1px solid #000;
}
.filter-section .menu .nav li .dropdown-menu div:last-child {
border-bottom: none;
padding-bottom: 10px;
padding-top: 20px;
}
.filter-section .menu .nav li .dropdown-menu.active {
display: block;
}
/*.nav li .dropdown-menu a {
width: 150px;
}*/
/****************************************/
.listofslect {
padding: 0px;
}
.listofslect li {
padding: 10px;
font-size: 14px;
display: inline-block;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.name {
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 0;
margin: 0;
padding-bottom: 14px;
padding-top: 10px;
}
.name input {
margin-right: 12px;
}
.button {
border: none;
color: white;
padding: 14px 0px;
text-align: center;
font-size: 16px;
width: 100%;
cursor: pointer;
border-radius: 4px;
background-color: #000000;
}
button:focus {
outline: 0px dotted;
outline: 0px auto -webkit-focus-ring-color;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
<div class="filter-section">
<div class="container d-flex">
<div id="showmenu">
<p> <img src="images/hamburger-icon-open.png"> Filter</p>
</div>
<div class="menu" style="display: none;">
<ul class="nav">
<li class="button-dropdown">
<span>•</span>Learning Modes
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Self paced"/>Self paced</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Classroom"/>Classroom</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Live Virtual-Classroom"/>Live Virtual Classroom</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Level
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="ABC"/>ABC</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="DEF"/>DEF</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="GHI"/>GHI</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Role
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="JKL"/>JKL</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="MNO"/>MNO</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="PQR"/>PQR</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Skills
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="STU"/>STU</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="VWX"/>VWX</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="YZ"/>YZ</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container" id="div">
<ol class="listofslect"></ol>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
The jsFiddle and Codepen code is attached.
I found a way to fix this issue thanks to this link, that explains how to get the checkbox values. This solution works with an array, So to fix your issue, you need below code to print every element checked on the submit event.
var values = new Array();
$.each($("input[name='user_group[]']:checked"), function() {
values.push($(this).val());
});
I have got the solution.
Please go through the code for reference. View in full page.
the codepen and jsfiddle snippets
// Onclick Filter Slide Right Script Starts
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').show("slide");
});
});
// Onclick Filter Slide Right Script Ends
// Onclick Dropdown Script Starts Starts
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
// Onclick Dropdown Script Starts Ends
// Onclick Checkbox Display in div and Vice-Varsa Script Starts
// $(':checkbox').on('change', function() {
// var $this = $(this);
// if (this.checked) {
// $('#results')
// .append('<li class="">' + $this.val() + ' <img src="images/close-button.png"> </li>');
// } else {
// removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
// }
// });
// $(document).on('click', '.item', function() {
// removeCheckedResult($(this));
// });
// function removeCheckedResult($child) {
// $child.parent().remove();
// $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
// }
$(function() {
$(document).on('click', '.item', function() {
removeCheckedResult($(this));
});
function removeCheckedResult($child) {
$child.parent().remove();
$('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}
$("button").on("click", function(e){
var arr =[];
var arr1 =[];
$("#results").html('');
e.preventDefault();
var count = document.querySelectorAll("input:checked")
for (i = 0; i < count.length; i++) {
arr.push(count[i].value);
arr1.push(count[i].getAttribute("data-ref"));
}
for (j = 0; j < arr.length; j++) {
$("#results").append('<li>'+arr[j]+'<img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></li>')
}
})
})
// Onclick Checkbox Display in div and Vice-Varsa Script Ends
$(document).ready(function() {
$('#show-hidden-menu, #show-hidden-menu1, #show-hidden-menu2, #show-hidden-menu3').click(function() {
$('.hidden-menu').show("slow");
// Alternative animation for example
// slideToggle("fast");
});
});
$(document).ready(function(){
$(".mode-apply-btn").click(function(){
$(".mode-sec span").css("color", "#26d400");
});
$(".level-apply-btn").click(function(){
$(".level-sec span").css("color", "#26d400");
});
$(".role-apply-btn").click(function(){
$(".role-sec span").css("color", "#26d400");
});
$(".skills-apply-btn").click(function(){
$(".skills-sec span").css("color", "#26d400");
});
$(".button").click(function(){
$(".clear-all").css("display", "inline-block");
});
});
$(".dropdown-menu input:checkbox").on("change", function() {
var len = $(".dropdown-menu input[type='checkbox']:checked").length;
if(len>0)
{
$("#general .counter").text('('+len+')');
}
else
{
$("#general .counter").text(' ');
}
});
$('#filter-submenu').find('.clear-all').prependTo('.hidden-menu>li:last');
// $('.hidden-menu > .clear-all').prepend("");
$('.clear-all').on('click', function () {
$('#filter-submenu').empty();
$('.menu .dropdown-menu div input').prop('checked', false);
$(".mode-sec span").css("color", "#fff");
$(".level-sec span").css("color", "#fff");
$(".skills-sec span").css("color", "#fff");
$(".role-sec span").css("color", "#fff");
});
.filter-section {
margin-top: 40px;
margin-bottom: 40px;
}
.filter-section .container {
margin-right: 100px;
margin-left: 100px;
padding: 0px;
}
.filter-section #showmenu {
margin: 0px;
margin-right: 34px;
margin-bottom: 25px;
}
.filter-section #showmenu a {
color: #3f3f3f;
width: 102px;
font-size: 18px;
font-weight: 600;
margin: 0px;
padding: 0px;
cursor: pointer;
}
.filter-section #showmenu a img{
width:35px
}
.filter-section .menu {
margin-bottom: 25px;
display: none;
}
.filter-section .menu .nav {
border-left: 1px solid #3f3f3f;
}
.filter-section .nav {
display: block;
margin: 0;
padding: 0;
height: 24px;
}
.filter-section .nav li {
display: inline-block;
list-style: none;
}
.filter-section .menu .nav .button-dropdown {
position: relative;
margin-left: 24px;
height: 24px;
}
.filter-section .menu .nav li a {
color: #000;
background-color: #fff;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.filter-section .menu .nav li a span {
font-size: 26px;
line-height: 0;
height: 24px;
margin-right: 10px;
color: #fff;
}
.filter-section .menu .nav li .dropdown-toggle::after {
display: inline-block;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu .dropdown-toggle::after {
display: none;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 10px;
margin-left: 22px;
text-align: left;
width: 224px;
padding: 10px 24px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
.filter-section .menu .nav li .dropdown-menu div {
border-bottom: 1px solid #000;
padding: 12px 0px;
}
.filter-section .menu .nav li .dropdown-menu div:nth-last-child(2) {
border-bottom: none;
}
.filter-section .menu .nav li .dropdown-menu div:last-child {
border-bottom: none;
padding-bottom: 10px;
padding-top: 20px;
}
.filter-section .menu .nav li .dropdown-menu div label {
margin-bottom: 0px;
line-height: 0px;
}
.filter-section .menu .nav li .dropdown-menu.active {
display: block;
}
.hidden-menu {
display: none;
}
/****************************************/
.listofslect {
padding: 0px;
}
.listofslect li {
padding: 10px;
font-size: 14px;
display: inline-block;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.name {
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 0;
margin: 0;
padding-bottom: 14px;
padding-top: 10px;
}
.name input {
margin-right: 12px;
}
.button {
border: none;
color: white;
padding: 14px 0px;
text-align: center;
font-size: 16px;
width: 100%;
cursor: pointer;
border-radius: 4px;
background-color: #000000;
}
button:focus {
outline: 0px dotted;
outline: 0px auto -webkit-focus-ring-color;
}
/**********************************************/
.filter-section #results{
display: none;
}
.filter-section .hidden-menu {
list-style: none;
display: inline-block;
padding: 0px;
margin: 0px;
margin-bottom: 25px;
}
.filter-section .hidden-menu li {
padding: 16px 15px;
margin: 0px;
line-height: 0px;
margin-right: 16px;
margin-bottom: 16px;
float:left;
border-radius: 4px;
border: solid 1px #ECECEC;
background-color: #ECECEC;
}
.filter-section .hidden-menu li a img {
margin-left: 15px;
width: 10px;
}
.filter-section .clear-all{
padding: 8px 0px;
border: none;
background: #fff;
display:none;
}
.filter-section .clear-all a{
color: #26d400;
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
/****************************/
/* Hide the browser's default checkbox */
/*label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}*/
/*label input{
margin-right: 12px;
}*/
/* Create a custom checkbox */
/*.checkmark {
position: absolute;
top: 15px;
left: 23px;
height: 13px;
width: 13px;
background-color: #fff;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
border: 1px solid;
border-radius: 0px;
}*/
/* On mouse-over, add a grey background color */
/*label:hover input ~ .checkmark {
background-color: #fff;
}*/
/* When the checkbox is checked, add a blue background */
/*label input:checked ~ .checkmark {
background-color: #000;
}
*/
/* Create the checkmark/indicator (hidden when not checked) */
/*.checkmark:after {
content: "";
position: absolute;
display: none;
}*/
/* Show the checkmark when checked */
/*label input:checked ~ .checkmark:after {
display: block;
}*/
/* Style the checkmark/indicator */
/*label .checkmark:after {
left: 4px;
top: 0px;
width: 4px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}*/
.nav .button-dropdown .dropdown-menu label
{
display:block
}
.nav .button-dropdown .dropdown-menu input[type="checkbox"]
{
position:relative;
top:0px;
margin-right:12px;
-moz-appearance:none;
background-color:#dddddd!important;
}
.nav .button-dropdown .dropdown-menu input[type='checkbox']:after
{
content:"";
vertical-align:middle;
-webkit-appearance:none!important;
-moz-appearance:none!important;
appearance:none!important;
background-color:#fff!important;
border: 1px solid #000;
color:#fff;
text-align:center;
line-height:15px;
position:absolute;
cursor:pointer;
height:15px;
width:15px;
left:0;top:0;
font-size:11px;
background:#fff
}
.nav .button-dropdown .dropdown-menu input[type='checkbox']:checked:after
{
background:#000;
/*content:'\f00c';*/
content: url(images/left-arrow-icon.png);
color:#000;
-webkit-appearance:none!important;
-moz-appearance:none!important;
background-color:#000!important;
color:#fff;
font-family:FontAwesome
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
<div class="filter-section">
<div class="container d-flex">
<div id="showmenu">
<a id="general"> <img src="https://i.dlpng.com/static/png/5460626-filter-filtering-filters-icon-with-png-and-vector-format-for-filter-png-512_512_preview.png"> Filter <span class="counter"></span></a>
</div>
<div class="menu">
<ul class="nav">
<li class="button-dropdown">
<span>•</span>Learning Modes
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test" data-ref="1">test<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle mode-apply-btn" id="show-hidden-menu">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Level
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle level-apply-btn" id="show-hidden-menu1">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Role
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test14" data-ref="14">test14<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test15" data-ref="15">test15<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test16" data-ref="16">test16<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test17" data-ref="17">test17<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test18" data-ref="18">test18<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle role-apply-btn" id="show-hidden-menu2">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Skills
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test19" data-ref="19">test19<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test20" data-ref="20">test20<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test21" data-ref="21">test21<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test22" data-ref="22">test22<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test23" data-ref="23">test23<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test24" data-ref="24">test24<span class="checkmark"></span></label>
</div>
<div class="" >
<button class="button dropdown-toggle skills-apply-btn" id="show-hidden-menu3">Apply</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container d-flex" id="filter-submenu">
<ul class="hidden-menu clearfix" id="results">
</ul>
<a id="clear-all-btn" class="col-1 clear-all">Clear all</a>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Related
How could I achieve the same behaviour as my current CSS using JQuery or javascript, where the contents of a tab is shown when its div is clicked?
For example, If I clicked SUN, it shows content of the sunday tab i.e " Today is Sunday" and if clicked MON shows "Today is Monday".
How can I achieve this using JQuery and Javascript rather than CSS?
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 3px;
margin-top: 2px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1">
<p> This is Sunday</>
</div>
<div id="content2">
<p> This is Monday</p>
</div>
<div id="content3">
<p> This is Tuesday</p>
</div>
<div id="content4">
<p> This is Wednesday</p>
</div>
<div id="content5">
<p> This is Thursday</p>
</div>
<div id="content6">
<p> This is Friday</p>
</div>
<div id="content7">
<p> This is Saturday</p>
</div>
There is a great article on W3schools on how to make tabs using Javascript -
https://www.w3schools.com/howto/howto_js_tabs.asp
Each content div should be given a common class. Such as tabcontent. When one of the radio buttons are clicked to switch tabs a function will be ran to hide all tabcontent divs (hiding all shown tabs), and then only show the required content.
Using JQuery I came up with this code -
HTML
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1" class="tabcontent">
<p> This is Sunday</>
</div>
<div id="content2" class="tabcontent">
<p>This is Monday</p>
</div>
<div id="content3" class="tabcontent">
<p> This is Tuesday</p>
</div>
<div id="content4" class="tabcontent">
<p> This is Wednesday</p>
</div>
<div id="content5" class="tabcontent">
<p> This is Thursday</p>
</div>
<div id="content6" class="tabcontent">
<p> This is Friday</p>
</div>
<div id="content7" class="tabcontent">
<p> This is Saturday</p>
</div>
CSS
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
.tabcontent {display: none;}
#content1 {display: block;}
JQuery Function
$('input[name=tabs]').click(function(){
var id = $(this).attr('id');
$('.tabcontent').css('display', 'none');
switch (id) {
case "tab1":
$('#content1').css('display', 'block');
break;
case "tab2":
$('#content2').css('display', 'block');
break;
case "tab3":
$('#content3').css('display', 'block');
break;
case "tab4":
$('#content4').css('display', 'block');
break;
case "tab5":
$('#content5').css('display', 'block');
break;
case "tab6":
$('#content6').css('display', 'block');
break;
case "tab7":
$('#content7').css('display', 'block');
break;
}
});
Other methods can be used rather than a switch statement as long as the display of all tabcontent elements is set to none and the content to be shown is set to be displayed with block.
Hope this achieves what you wanted.
I'm trying to make this accordion be a selector for some items. So a quick break down so if a button is pressed (which is really a radio button) then the panel below it makes one of the three choices visible. They each have a class called invisible which makes them hidden and I want to make which ever one equals the id of the selected radio button visible.
Picture Example
For some reason however they are not invisible and only one is showing is it something to do with the accordion JavaScript I have?
HTML
<div id="pricing_holder">
<button class="accordion">
<h2 class="text-center">Screen Type</h2></button>
<div class="panel text-center" id="type_panel">
<label class="icon-select">
<input type="radio" name="type" id="laptop_button" /> <img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-laptop-4.png&r=0&g=0&b=0" alt="laptop"> </label>
<label class="icon-select">
<input type="radio" name="type" id="tablet_button" /> <img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-tablet-1.png&r=0&g=0&b=0" alt="tablet"> </label>
<label class="icon-select">
<input type="radio" name="type" id="phone_button" /> <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-smartphone-4.png" alt="phone"> </label>
</div>
<button class="accordion">
<h2 class="text-center">Model</h2></button>
<div class="panel invisible" id="laptop_panel">
<div id="col1">
<label class="control control--radio">LAPTOP
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">LAPTOP2
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">LAPTOP3
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel invisible" id="tablet_panel">
<div id="col1">
<label class="control control--radio">TABLET1
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">TABLET2
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">TABLET3
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel invisible" id="phone_panel">
<div id="col1">
<label class="control control--radio">iPhone 3
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Microsoft Lumia 430
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Galaxy S3
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
</div>
</div>
CSS
#pricing_holder {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.icon-select {
margin-right: 20px;
margin-left: 20px;
}
#col1 {
float: left;
width: 285px;
height: 65px;
}
#col2 {
float: none;
height: 65px;
overflow: hidden;
display: table-cell;
}
#col3 {
float: right;
height: 65px;
}
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 12px;
width: 75%;
text-align: left;
outline: none;
transition: 0.4s;
border-left: 1px solid grey;
border-right: 1px solid grey;
border-top: 1px solid grey;
border-radius: 4px;
border-bottom: none;
}
button.accordion.active,
button.accordion:hover {
background-color: #6fdd7a;
color: #ffffff;
}
div.panel {
padding: 0px 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
width: 71%;
display: block;
transition: max-height 0.2s ease-out;
border: 1px solid grey;
}
label > input {
visibility: hidden;
position: absolute;
}
label > input + img {
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
-webkit-transition: all 0.25s linear;
}
label > input:checked + img {
background-color: #6fdd7a;
}
.invisible {
display: none;
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
background: #ccc;
}
.control input:checked ~ .control__indicator {
background: #6fdd7a;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
background: #6fdd7a;
}
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
.control input:checked ~ .control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
top: 7px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
background: #7b7b7b;
}
JS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
var typeselect = $("input[name='type']:checked").attr('id');
$("laptop_button").click(function(){
$("laptop_panel").toggleClass("invisible");
});
$("tablet_button").click(function(){
$("tablet_panel").toggleClass("invisible");
});
$("phone_button").click(function(){
$("phone_panel").toggleClass("invisible");
});
JSFIDDLE: https://jsfiddle.net/4crj2ash/
I am trying to implement a Selectbox which have some checkboxes in that selectbox like an image below. When i click on the select box it open the check box which exist in other div i have used z-index but its not working
it looks like this
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one"/>First checkbox</label>
<label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
<label for="three"><input type="checkbox" id="three"/>Third checkbox</label>
</div>
</div>
</form>
<div class="styled-select slate">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The third option</option>
</select>
</div>
This is CSS:-
<style>
.multiselect {
width: 200px;
height: 20px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
.styled-select {
background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
height: 29px;
overflow: hidden;
width: 240px;
}
.styled-select select {
background: transparent;
border: none;
font-size: 14px;
height: 29px;
padding: 5px; /* If you add too much padding here, the options won't show in IE */
width: 268px;
}
.styled-select.slate
{
background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
height: 34px;
width: 240px;
}
.styled-select.slate select {
border: 1px solid #ccc;
font-size: 16px;
height: 34px;
width: 268px;
}
#Sheraz, rather than modifying your code simply update with the following working code:
HTML
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
CSS
body {
font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
color: #fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
}
.dropdown {
position: absolute;
top:50%;
transform: translateY(-50%);
}
a {
color: #fff;
}
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #4F6877;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #4F6877;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
button {
background-color: #6BBE92;
width: 302px;
border: 0;
padding: 10px 0;
margin: 5px 0;
text-align: center;
color: #fff;
font-weight: bold;
}
JS
/*
Dropdown with Multiple checkbox select with jQuery - May 27, 2013
(c) 2013 #ElmahdiMahmoud
license: http://www.opensource.org/licenses/mit-license.php
*/
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
http://codepen.io/elmahdim/pen/hlmri
Hope that helps, Good luck.
#Sheraj use this plugin from jquery..
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Multi-Select-List-with-Checkboxes-MultiSelect/
I created nested checkboxes with psuedo(:before) icon and my toggle is not work correctly
where is my fold ? if u check it out you gonna see it's not going to work as expected
my html structure which is below
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li >
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
my css structure
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
/*
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
*/
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
and my jquery
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
/*
$('.new-checkbox li input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").toggleClass("downCheck");
});
*/
if($('.new-checkbox li:has("> ul")')) {
$('.new-checkbox li input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").toggleClass("downCheck");
});
}
});
and to see on codepen
Hi friends I am a beginner (junior) front end
and I want to learn something to do.
my question is how to do accordion checkboxes but for my nested checkboxes
this is the demo click to see demo
and this id my demo that I do
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li><input type="checkbox" id="input1"><label for="input1">kategori <strong>(1)</strong></label>
<ul>
<li><input type="checkbox" id="input11"><label for="input11">kategori<strong>(11)</strong></label></li>
<li><input type="checkbox" id="input12"><label for="input12">kategori <strong>(12)</strong></label></li>
<li><input type="checkbox" id="input13"><label for="input13">kategori <strong>(13)</strong></label></li>
</ul>
</li>
<li><input type="checkbox" id="input2"><label for="input2">kategori <strong>(2)</strong></label></li>
<li><input type="checkbox" id="input3"><label for="input3">kategori <strong>(3)</strong></label>
<ul>
<li><input type="checkbox" id="input31"><label for="input31">kategori <strong>(31)</strong></label></li>
<li><input type="checkbox" id="input32"><label for="input32">kategori <strong>(32)</strong></label></li>
<li><input type="checkbox" id="input33"><label for="input33">kategori <strong>(33)</strong></label>
<ul>
<li><input type="checkbox" id="input331"><label for="input331">kategori <strong>(331)</strong></label></li>
<li><input type="checkbox" id="input332"><label for="input332">kategori <strong>(332)</strong></label></li>
<li><input type="checkbox" id="input333"><label for="input333">kategori <strong>(333)</strong></label></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!--new-checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
css
.new-checkbox ul{
padding:0;
margin:0;
list-style:none;
margin-left: 30px;
font: normal 11px/16px "Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child{
margin-left: 0;
}
.new-checkbox ul li {margin: 3px 0;}
.new-checkbox input[type="checkbox"] {
display:none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding:0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor:pointer;
}
.new-checkbox input[type="checkbox"]
{
display: none;
}
.new-checkbox li
{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before
{
content: "\25bc";
}
.new-checkbox input[type="checkbox"][id]:not(:checked) ~ ul
{
display: none;
}
js
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var $close = $(this).closest('ul').closest('li');
if ($(this).is(':checked')) {
// check all children
$(this).parent().find('li input[type=checkbox]').prop('checked', true);
// check all parents
$(this).parent().prev().prop('checked', true);
} else {
// uncheck all children
$(this).parent().find('li input[type=checkbox]').prop('checked', false);
}
while ($close.length) {
$che = $close.find('ul input:checkbox');
$checked = $close.find('ul input:checkbox:checked');
$close.children('input').prop('checked', $che.length == $checked.length);
$close = $($close.children('input')).closest('ul').closest('li');
console.log($che.length, $checked.length);
}
});
});
see on codepen
You can use a parentsUntil() to iterate over each parent element and then see whether it has a checked checkbox like
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
$(this).parent().find('input[type=checkbox]').prop('checked', this.checked);
if (!this.checked) {
$(this).parentsUntil('.new-checkbox > ul', 'li').children('input[type=checkbox]').prop('checked', function() {
return $(this).siblings('ul').find('input[type=checkbox]').is(':checked')
})
}
});
});
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox input[type="checkbox"][id]:not(:checked) ~ ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-checkbox">
<ul>
<li>
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!--new-checkbox-->