Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- iCheck v1.0.2 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
</head>
<body>
    <h1>Minimal</h1>
    <div class="minimal">
        <input type="checkbox">
        <input type="checkbox" checked>
        <input type="radio" >
        <input type="radio" checked>
    </div>
    <h1>Square</h1>
    <div class="square">
        <input type="checkbox">
        <input type="checkbox" checked>
        <input type="radio" >
        <input type="radio" checked>
    </div>
    <h1>Flat</h1>
    <div class="flat">
        <input type="checkbox">
        <input type="checkbox" checked>
        <input type="radio" >
        <input type="radio" checked>
    </div>
    <h1>Polaris</h1>
    <div class="polaris">
        <input type="checkbox">
        <input type="checkbox" checked>
        <input type="radio" >
        <input type="radio" checked>
    </div>
    <h1>Futurico</h1>
    <div class="futurico">
        <input type="checkbox">
        <input type="checkbox" checked>
        <input type="radio" >
        <input type="radio" checked>
    </div>
    <script type="text/javascript">
        $( ".minimal input" ).iCheck({
            handle: 'both', // 設定渲染的物件
            checkboxClass: 'icheckbox_minimal', // checkbox的風格
            radioClass: 'iradio_minimal', // radio的風格
            checkedClass: 'checked', // 當input.checked是true時，自動新增的類別名稱
            checkedCheckboxClass: '', // 當checkbox的input.checked是true時，自動新增的類別名稱`
            checkedRadioClass: '',  // 當radio的input.checked是true時，自動新增的類別名稱
            uncheckedClass: '', // 當input.checked是false時，自動新增的類別名稱
            uncheckedCheckboxClass: '', // 當checkbox的input.checked是false時，自動新增的類別名稱
            uncheckedRadioClass: '', // 當radio的input.checked是false時，自動新增的類別名稱
            disabledClass: 'disabled', // 當input.disabled是true時，自動新增的類別名稱
            disabledCheckboxClass: '', // 當checkbox的input.disabled是true時，自動新增的類別名稱
            disabledRadioClass: '', // 當radio的input.disabled是true時，自動新增的類別名稱
            enabledClass: '', // 當input.disabled是false時，自動新增的類別名稱
            enabledCheckboxClass: '', // 當checkbox的input.disabled是false時，自動新增的類別名稱
            enabledRadioClass: '', // 當radio的input.disabled是false時，自動新增的類別名稱
            indeterminateClass: 'indeterminate', // 當input.indeterminate是true時，自動新增的類別名稱
            indeterminateCheckboxClass: '', // 當checkbox的input.indeterminate是true時，自動新增的類別名稱`
            indeterminateRadioClass: '', // 當radio的input.indeterminate是true時，自動新增的類別名稱
            determinateClass: '', // 當input.indeterminate是false時，自動新增的類別名稱
            determinateCheckboxClass: '', // 當checkbox的input.indeterminate是false時，自動新增的類別名稱
            determinateRadioClass: '', // 當radio的input.indeterminate是false時，自動新增的類別名稱
            hoverClass: 'hover', // 當hover至物件時，自動新增的類別名稱
            focusClass: 'focus', // 當focus至物件時，自動新增的類別名稱
            activeClass: 'active', // 當觸碰到物件時，自動新增的類別名稱
            labelHover: true, // 當hover至物件時，是否自動新增label
            labelHoverClass: 'hover',  // 當hover至物件時，自動新增到label的類別名稱`
            increaseArea: '', // 增加觸碰面積，負數為減少
            cursor: false, // 啟用pointer的CSS屬性(手指圖案)
            inheritClass: true, // 繼承input原本的類別名稱
            inheritID: false, // 啟用"iCheck-"的前綴詞在ID上面
            aria: false, // 支援ARIA
            insert: '' // 新增HTML在物件上面
        });
        $( ".square input" ).iCheck({
            checkboxClass: "icheckbox_square", // checkbox樣式
            radioClass: "iradio_square" // radio樣式
        });
        $( ".flat input" ).iCheck({
            checkboxClass: "icheckbox_flat", // checkbox樣式
            radioClass: "iradio_flat" // radio樣式
        });
        $( ".polaris input" ).iCheck({
            checkboxClass: "icheckbox_polaris", // checkbox樣式
            radioClass: "iradio_polaris" // radio樣式
        });
        $( ".futurico input" ).iCheck({
            checkboxClass: "icheckbox_futurico", // checkbox樣式
            radioClass: "iradio_futurico" // radio樣式
        });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers