A jquery plugin that do amazing things.

• Main files
• Quick start
• Requirements
• Usage
• Examples
• Options
• Methods
• Events
• No conflict
• Browser support
• Contributing
• Development
• Changelog
• Copyright and license

dist/ ├── jquery-asCheck.js ├── jquery-asCheck.es.js ├── jquery-asCheck.min.js └── css/    ├── asCheck.css    └── asCheck.min.css 

Several quick start options are available:

• Development - unminified
• Production - minified

bower install jquery-asCheck --save

npm install jquery-asCheck --save

yarn add jquery-asCheck

If you want build from source:

git clone git@github.com:amazingSurge/jquery-asCheck.git cd jquery-asCheck npm install npm install -g gulp-cli babel-cli gulp build

Done!

jquery-asCheck requires the latest version of jQuery.

<link rel="stylesheet" href="/path/to/asCheck.css"> <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery-asCheck.js"></script>

<input class="example" type="radio" name="radio" id="radio-example" value="male" /><label for="radio-example">Example</label>

All you need to do is call the plugin on the element:

jQuery(function($) { $('.example').asCheck(); });

There are some example usages that you can look at to get started. They can be found in the examples folder.

jquery-asCheck can accept an options object to alter the way it behaves. You can see the default options by call $.asCheck.setDefaults(). The structure of an options object is as follows:

{ namespace: 'asCheck', skin: null, disabled: false } 

Methods are called on asCheck instances through the asCheck method itself. You can also save the instances to variable for further use.

// call directly $().asCheck('destroy'); // or var api = $().data('asCheck'); api.destroy();

Enable the check functions.

$().asCheck('enable');

Disable the check functions.

$().asCheck('disable');

Destroy the check instance.

$().asCheck('destroy');

jquery-asCheck provides custom events for the plugin’s unique actions.

$('.the-element').on('asCheck::ready', function (e) { // on instance ready });

If you have to use other plugin with the same namespace, just call the $.asCheck.noConflict method to revert to it.

<script src="other-plugin.js"></script> <script src="jquery-asCheck.js"></script> <script> $.asCheck.noConflict(); // Code that uses other plugin's "$().asCheck" can follow here. </script>

Tested on all major browsers.

Latest ✓	Latest ✓	Latest ✓	Latest ✓	9-11 ✓	Latest ✓

As a jQuery plugin, you also need to see the jQuery Browser Support.

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of jquery-asCheck before submitting an issue. There are several ways to help out:

• Bug reports
• Feature requests
• Pull requests
• Write test cases for open bug issues
• Contribute to the documentation

jquery-asCheck is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

npm install -g gulp npm install -g babel-cli npm install

Then you can generate new distributable files from the sources, using:

gulp build 

More gulp tasks can be found here.

To see the list of recent changes, see Releases section.

Copyright (C) 2016 amazingSurge.

Licensed under the LGPL license.

⬆ back to top

#jquery-asCheck

The powerful jQuery plugin that provide a easy used and customized checkbox. Project page and demos
Download: jquery-asCheck-master.zip

• callbacks to handle changes
• Lightweight size — 1 kb gzipped
• Saves changes to textarea, works carefully with any selectors

• jQuery 1.83+

Import this libraries:

• jQuery
• jquery-asCheck.min.js

And CSS:

• jquery-asCheck.css - desirable if you have not yet connected one

Create base html element:

<ul> <li> <input class="radio" type="radio" name="radiobox" id="male-1" value="male" /> <label for="male-1" >Male</label> </li> <li> <input class="radio" type="radio" name="radiobox" id="male-2" value="female" /> <label for="male-2" >Female</label> </li> <li> <input class="radio" type="radio" name="radiobox" id="male-3" value="male" disabled="disabled" /> <label for="male-3" >checked disable</label> </li> <li> <input class="radio" type="radio" name="radiobox" id="male-4" value="male" disabled="disabled" /> <label for="male-4" >checked disable</label> </li> </ul>

Initialize check:

$('.radio').check({skin: 'skin-1'});

Or initialize check with custom settings:

$(".radio").check({ namespace: 'check', skin: null, state: 'enabled', checked: 'checked', type: 'checkbox', // checkbox , radio onChange: function() {} });

{ //Optional property, set a namspace for css class, for example, we  //have <code>.check_active</code> class for active effect, if //namespace set to 'as-check', then it will be <code>.as-check_active namespace: 'check', //Optional property, set transition effect, it works after you load specified skin file skin: null, //Optional property, set input's disabled state state: enable, //Optional property, set input's checked property,if the value is 'checked',this input will be checked checked: 'checked', //Optional property, set input's type type: 'checkbox', //callback after input's state is changed Onchange: function(）{} }

jquery check has different methods , we can use it as below :

// set input's state $(".radio").check("set"); // remove disabled state $(".radio").check("enable"); // change input's state to disabled $(".radio").check("disable");

• change: trigger when input's checked property changed
• disabled: trigger when input set to disabled
• enabled: trigger when input set to enabled

how to use event:

$(document).on('change', function(event,instance) { // instance means current check instance  // some stuff });