Checkboxes jQuery Plugin

Developer
Dang Van Thanh
Size
2,405 Kb
Views
18,216
  1. Checkboxes jQuery Plugin Previews
  2. Checkboxes jQuery Plugin HTML Codes
  3. Checkboxes jQuery Plugin CSS Codes
  4. Checkboxes jQuery Plugin JS Codes

How do I make an checkboxes jquery plugin?

What is a checkboxes jquery plugin? How do you make a checkboxes jquery plugin? This script and codes were developed by Dang Van Thanh on 13 September 2022, Tuesday.

Checkboxes jQuery Plugin Previews
IQ Test

Checkboxes jQuery Plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Checkboxes jQuery Plugin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table class="table"> <thead> <tr> <th><input type="checkbox" class="selectAll" checked /></th> <th>Make</th> <th>Model</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" id="chk01" name="chk01" /></td> <td>Honda</td> <td>Accord</td> <td>2009</td> </tr>	<tr> <td><input type="checkbox" id="chk02" name="chk02" /></td>	<td>Yamaha</td>	<td>Vixion</td>	<td>2013</td> </tr>	<tr> <td><input type="checkbox" id="chk03" name="chk03" /></td>	<td>Audi</td>	<td>R8</td>	<td>2009</td>	</tr>	<tr> <td><input type="checkbox" id="chk04" name="chk04" /></td>	<td>Toyata</td>	<td>Camry</td>	<td>2012</td>	</tr>	<tr> <td><input type="checkbox" id="chk05" name="chk05" /></td>	<td>Hyundai</td>	<td>Elantra</td>	<td>2010</td>	</tr>	</tbody>
</table> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Checkboxes jQuery Plugin - Script Codes CSS Codes

.table {	border-collapse: collapse;	border-spacing: 0;	width: 100%;
}
.table th,
.table td {	border: 1px solid #aaa;	padding: 5px 10px;
}
.table th {	text-align: left;	background-color: #ccc;
}

Checkboxes jQuery Plugin - Script Codes JS Codes

(function($) { 'use strict'; $.fn.extend({ checkboxes: function(options) { // Default option var defaults = { itemChild: '' }; var option = $.extend(defaults, options); // Checked value function function checkedValue(element, bool) { if (bool) { return element.each(function() { $(this).prop('checked', true); }); } else { return element.each(function() { $(this).prop('checked', false); }); } } // Return checked or unchecked return this.each(function() { var obj = option, $itemAll = $(this), $itemChild = $('input[name^="' + obj.itemChild + '"]'); // Checked all checkbox before parent checked load page if ($itemAll.is(':checked')) { checkedValue($itemChild, true); } // Checked all or unchecked checkbox when parent checkbox checked or unchecked $itemAll.change(function() { var $self = $(this); if ($self.is(':checked')) { checkedValue($itemChild, true); } else { checkedValue($itemChild, false); } }); // Checked parent checkbox when all child checkbox checked $itemChild.change(function() { var flag = true; if (!$itemChild.is(':checked')) { console.log(!$itemChild.is(':checked')); $itemAll.prop('checked', false); } $itemChild.each(function() { var $self = $(this); if (!$self.is(':checked')) { flag = false; return; } }); $itemAll.prop('checked', flag); }); }); } });
})(jQuery);
$(document).ready(function() { $('.selectAll').checkboxes({ itemChild: 'chk' });
});
Checkboxes jQuery Plugin - Script Codes
Checkboxes jQuery Plugin - Script Codes
Home Page Home
Developer Dang Van Thanh
Username dangvanthanh
Uploaded September 13, 2022
Rating 3
Size 2,405 Kb
Views 18,216
Do you need developer help for Checkboxes jQuery Plugin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dang Van Thanh (dangvanthanh) Script Codes
Name
Typography with Text
Simple Player MP3
Browser Pure CSS3
Scale in CSS3 Transform
CSS3 Multi-Column Module 1
Rotate in CSS3 3D Transform
Pure Car Animation
CSS Slide Up and Slide Down
Media Queries Sass Mixin
Navigation Responsive with Transition
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!