Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nunof07/jquery-selectall
jQuery Select All Checkboxes Plugin
https://github.com/nunof07/jquery-selectall
jquery-plugin
Last synced: about 21 hours ago
JSON representation
jQuery Select All Checkboxes Plugin
- Host: GitHub
- URL: https://github.com/nunof07/jquery-selectall
- Owner: nunof07
- License: mit
- Created: 2015-08-31T14:03:24.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2015-08-31T15:15:25.000Z (about 9 years ago)
- Last Synced: 2024-10-22T21:30:11.619Z (15 days ago)
- Topics: jquery-plugin
- Language: HTML
- Size: 145 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jQuery Select All Checkboxes Plugin
jQuery plugin to handle "select all checkboxes" behavior:
- when a "select all" checkbox changes state, all related checkboxes change state accordingly;
- when all checkboxes are checked, the "select all" checkbox is also checked;
- when at least one checkbox is unchecked, the "select all" checkbox is unchecked.
## Demos
- [Demo 1](https://cdn.rawgit.com/nunof07/jquery-selectall/67c954a8c3c130130a19ab457cbd8e29b6585e58/demo1.html)
- [Demo 2](https://cdn.rawgit.com/nunof07/jquery-selectall/67c954a8c3c130130a19ab457cbd8e29b6585e58/demo2.html)
- [Demo 3](https://cdn.rawgit.com/nunof07/jquery-selectall/67c954a8c3c130130a19ab457cbd8e29b6585e58/demo3.html)
## How to
### Basic usage
Consider the following HTML:
```html
Select all
AAA
BBB
CCC
```
To enable the select all plugin:
```javascript
$(".selectAll").selectAll();
```
This call will setup event handlers to monitor changes in the "select all" checkbox and in the other checkboxes. It will also update the state of the "select all" checkbox in case all checkboxes are already checked.
All checkboxes will be targeted by default.
### Target specific checkboxes
If you want to target specific checkboxes, pass a checkbox selector string:
```javascript
$(".selectAll").selectAll(".checkbox");
```
### Alternative usage
Alternatively, you can call the plugin on a parent container:
```javascript
$(".container").selectAll({
container: true, // specify that we are using it on a container
selectAll: ".selectAll", // the "select all" checkbox selector string
checkbox: ".checkbox" // optionally target specific checkboxes
});
```
This usage has several advantages:
- If you have several groups of checkboxes with the same classes on their own containers, this will apply the "select all" behavior appropriately to all of them.
- Support for dynamic DOM changes. If checkboxes are being added/removed dynamically on the page, you can call this beforehand on a container. When a checkbox is added/removed, the state of the "select all" checkbox will be updated (this last part doesn't work on IE10 or below).
### Override defaults
You can override the default options:
```javascript
$.fn.selectAll.defaults = {
checkbox: "input[type='checkbox']",
container: false,
selectAll: ".selectAll"
};
```