freejs首页

自定义checkbox和radio的样式 可以换肤

Add checked state to 1 and 3 inputs show code
$('#input-1, #input-3').iCheck('check');
Remove checked state from 1 and 3 inputs show code
$('#input-1, #input-3').iCheck('uncheck');
Add disabled state to 2 and 4 inputs show code
$('#input-2, #input-4').iCheck('disable');
Remove disabled state from 2 and 4 inputs show code
$('#input-2, #input-4').iCheck('enable');
Remove all traces of iCheck show code
$('input').iCheck('destroy');

Callbacks

    Skins

    Minimal skin

    Live

    Color schemes

    States

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Demo

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    1. Choose a color scheme, there are 10 different styles available:
      • Black — minimal.css
      • Red — red.css
      • Green — green.css
      • Blue — blue.css
      • Aero — aero.css
      • Grey — grey.css
      • Orange — orange.css
      • Yellow — yellow.css
      • Pink — pink.css
      • Purple — purple.css
    2. Copy /skins/minimal/ folder and jquery.icheck.js file to your site.
    3. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/minimal/color-scheme.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      

      Example for a Red color scheme:

      <link href="your-path/minimal/red.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    4. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio" name="iCheck">
      <input type="radio" name="iCheck" checked>
      
    5. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_minimal',
          radioClass: 'iradio_minimal',
          increaseArea: '20%' // optional
        });
      });
      </script>
      

      For different from black color schemes use this code (example for Red):

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_minimal-red',
          radioClass: 'iradio_minimal-red',
          increaseArea: '20%' // optional
        });
      });
      </script>
      
    6. Done.
    Usage

    Square skin

    Live

    Color schemes

    States

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Demo

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the iCheck.

    1. Choose a color scheme, there are 10 different styles available:
      • Black — square.css
      • Red — red.css
      • Green — green.css
      • Blue — blue.css
      • Aero — aero.css
      • Grey — grey.css
      • Orange — orange.css
      • Yellow — yellow.css
      • Pink — pink.css
      • Purple — purple.css
    2. Copy /skins/square/ folder and jquery.icheck.js file to your site.
    3. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/square/color-scheme.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      

      Example for a Red color scheme:

      <link href="your-path/square/red.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    4. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio" name="iCheck">
      <input type="radio" name="iCheck" checked>
      
    5. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_square',
          radioClass: 'iradio_square',
          increaseArea: '20%' // optional
        });
      });
      </script>
      

      For different from black color schemes use this code (example for Red):

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_square-red',
          radioClass: 'iradio_square-red',
          increaseArea: '20%' // optional
        });
      });
      </script>
      
    6. Done.
    Usage

    Flat skin

    Live

    Color schemes

    States

    • Normal
    • Checked
    • Disabled
    • Disabled & checked
    Demo

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the iCheck.

    1. Choose a color scheme, there are 10 different styles available:
      • Black — square.css
      • Red — red.css
      • Green — green.css
      • Blue — blue.css
      • Aero — aero.css
      • Grey — grey.css
      • Orange — orange.css
      • Yellow — yellow.css
      • Pink — pink.css
      • Purple — purple.css
    2. Copy /skins/flat/ folder and jquery.icheck.js file to your site.
    3. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/flat/color-scheme.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      

      Example for a Red color scheme:

      <link href="your-path/flat/red.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    4. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio" name="iCheck">
      <input type="radio" name="iCheck" checked>
      
    5. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_flat',
          radioClass: 'iradio_flat'
        });
      });
      </script>
      

      For different from black color schemes use this code (example for Red):

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_flat-red',
          radioClass: 'iradio_flat-red'
        });
      });
      </script>
      
    6. Done.
    Usage

    Line skin

    Live

    Color schemes

    States

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Demo

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the iCheck.

    1. Choose a color scheme, there are 10 different styles available:
      • Black — line.css
      • Red — red.css
      • Green — green.css
      • Blue — blue.css
      • Aero — aero.css
      • Grey — grey.css
      • Orange — orange.css
      • Yellow — yellow.css
      • Pink — pink.css
      • Purple — purple.css
    2. Copy /skins/line/ folder and jquery.icheck.js file to your site.
    3. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/line/color-scheme.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      

      Example for a Red color scheme:

      <link href="your-path/line/red.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    4. Add some checkboxes, radio buttons and labels to your HTML:

      <input type="checkbox">
      <label>Checkbox 1</label>
      
      <input type="checkbox" checked>
      <label>Checkbox 2</label>
      
      <input type="radio" name="iCheck">
      <label>Radio button 1</label>
      
      <input type="radio" name="iCheck" checked>
      <label>Radio button 2</label>
      
    5. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
      $(document).ready(function(){
        $('input').each(function(){
          var self = $(this),
            label = self.next(),
            label_text = label.text();
      
          label.remove();
          self.iCheck({
            checkboxClass: 'icheckbox_line',
            radioClass: 'iradio_line',
            insert: '<div class="icheck_line-icon"></div>' + label_text
          });
        });
      });
      </script>
      

      For different from black color schemes use this code (example for Red):

      <script>
      $(document).ready(function(){
        $('input').each(function(){
          var self = $(this),
            label = self.next(),
            label_text = label.text();
      
          label.remove();
          self.iCheck({
            checkboxClass: 'icheckbox_line-red',
            radioClass: 'iradio_line-red',
            insert: '<div class="icheck_line-icon"></div>' + label_text
          });
        });
      });
      </script>
      
    6. Done.
    Usage

    Polaris skin

    Live

    States

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Demo

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the iCheck.

    1. Copy /skins/polaris/ folder and jquery.icheck.js file to your site.
    2. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/polaris/polaris.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    3. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio" name="iCheck">
      <input type="radio" name="iCheck" checked>
      
    4. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_polaris',
          radioClass: 'iradio_polaris',
          increaseArea: '-10%' // optional
        });
      });
      </script>
      
    5. Done.
    Usage

    Futurico skin

    Live

    States

    • Normal
    • Checked
    • Disabled
    • Disabled & checked
    Demo

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the iCheck.

    1. Copy /skins/futurico/ folder and jquery.icheck.js file to your site.
    2. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/futurico/futurico.css" rel="stylesheet">
      <script src="your-path/jquery.icheck.js"></script>
      
    3. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
      <input type="checkbox" checked>
      <input type="radio" name="iCheck">
      <input type="radio" name="iCheck" checked>
      
    4. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
      $(document).ready(function(){
        $('input').iCheck({
          checkboxClass: 'icheckbox_futurico',
          radioClass: 'iradio_futurico',
          increaseArea: '20%' // optional
        });
      });
      </script>
      
    5. Done.