What is this?
jCheckBox is a lightweight, flexible checkbox jQuery plugin, that helps with the selection of related checkboxes.
Usage
Sources
Put the following lines below to the head section.
<!-- Bootstrap 4 CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" async="">
<!-- JS -->
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jCheckBox -->
<script src="https://james-muriithi.github.io/jCheckBox/dist/jquery.jCheckBox.min.js"></script>
<!-- end -->Plugin initialization
Put in the head section the plugin initialization's code or in the end of the body section:
<script>
$(document).ready(function () {
$(".your-check-box-div").jCheckBox();
});
</script>Plugin initialization with parameters:
<script>
$(document).ready(function () {
$(".your-div").jCheckBox({
checkChildren: true, //default true
parentClass: "parent", //default parent
onParentChecked: function() {}, //callback when the parent checkbox is checked
onChildChecked: function() {}, //callback when the child checkbox is checked
onParentUnchecked: function() {}, //callback when the parent checkbox is unchecked
onChildUnchecked: function() {} //callback when the child checkbox is unchecked
});
});
</script>Plugin chained functions
<script>
$(document).ready(function () {
var j = $("#user-permissions").jCheckBox({
checkChildren: true
});
j.checkAll(); // check all checkboxes
setTimeout(function() {
// j.unCheckAll(); // to uncheck all checkboxes
j.unCheck('#29'); //provide an id a class or a value
//j.unCheck('.parent'); //using a class
//j.unCheck('29'); //using a value
//j.check('#29'); provide an id a class or a value
//j.check('.parent'); //using a class
//j.check('29'); //using a value
}, 1000)
var values = j.getCheckedValues(); //returns values of all checked checkboxes
});
</script>Third-party libraries
Full Example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootestrap 4 CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" async="">
<!-- JS -->
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jCheckBox -->
<script src="https://james-muriithi.github.io/jCheckBox/dist/jquery.jCheckBox.min.js"></script>
<!-- end -->
</head>
<style>
.m-t-20 {
margin-top: 20px !important;
}
</style>
<body style="background: #f9f9f9;" class="h-100 container">
<form class="card mt-5">
<div class="card-body">
<h4>User Permissions</h4>
<div class="form-row user-permissions" id="user-permissions">
<div class="col-md-3 m-t-20 student">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent" id="1" name="roles[]" value="1">
<label class="custom-control-label" for="1">Manage Student</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-1" id="2" name="roles[]" value="2">
<label class="custom-control-label" for="2">Add Student</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-1" id="3" name="roles[]" value="3">
<label class="custom-control-label" for="3">View Students</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-1" id="9" name="roles[]" value="9">
<label class="custom-control-label" for="9">Edit Student</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-1" id="10" name="roles[]" value="10">
<label class="custom-control-label" for="10">Delete Student</label>
</div>
</div>
<div class="col-md-3 m-t-20 user">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent" id="4" name="roles[]" value="4">
<label class="custom-control-label" for="4">Manage Users</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-4" id="5" name="roles[]" value="5">
<label class="custom-control-label" for="5">View Users</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-4" id="6" name="roles[]" value="6">
<label class="custom-control-label" for="6">Add User</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-4" id="32" name="roles[]" value="32">
<label class="custom-control-label" for="32">Delete Users</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-4" id="33" name="roles[]" value="33">
<label class="custom-control-label" for="33">Edit Users</label>
</div>
</div>
<div class="col-md-3 m-t-20 exams">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent" id="7" name="roles[]" value="7">
<label class="custom-control-label" for="7">Manage Exams</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-7" id="8" name="roles[]" value="8">
<label class="custom-control-label" for="8">Enter Marks</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-7" id="13" name="roles[]" value="13">
<label class="custom-control-label" for="13">View Marks</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-7" id="14" name="roles[]" value="14">
<label class="custom-control-label" for="14">Add New Exams</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-7" id="15" name="roles[]" value="15">
<label class="custom-control-label" for="15">View Exams</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-7" id="16" name="roles[]" value="16">
<label class="custom-control-label" for="16">Delete Added Exam</label>
</div>
</div>
<div class="col-md-3 m-t-20 fee">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent" id="11" name="roles[]" value="11">
<label class="custom-control-label" for="11">Manage Fee</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-11" id="21" name="roles[]" value="21">
<label class="custom-control-label" for="21">Record Fee</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-11" id="22" name="roles[]" value="22">
<label class="custom-control-label" for="22">Edit Fee Details</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-11" id="23" name="roles[]" value="23">
<label class="custom-control-label" for="23">View Statements</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-11" id="24" name="roles[]" value="24">
<label class="custom-control-label" for="24">Add Extra Fee</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-11" id="25" name="roles[]" value="25">
<label class="custom-control-label" for="25">Manage Discounts</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-11" id="28" name="roles[]" value="28">
<label class="custom-control-label" for="28">Delete Recorded Fee</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-11" id="29" name="roles[]" value="29">
<label class="custom-control-label" for="29">View Deleted Fee</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input parent-11" id="31" name="roles[]" value="31">
<label class="custom-control-label" for="31">Delete Added Fee</label>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
<script>
var j = $("#user-permissions").jCheckBox({
checkChildren: true
});
j.checkAll()
setTimeout(function() {
// j.unCheckAll();
j.unCheck('#29');
}, 1000)
</script>Codepen
A codepen example
Licence
The MIT Licence
Copyright © 2019