如何让JQuery与iCheck插件配合使用

时间:2015-08-13 11:09:43

标签: javascript jquery html css icheck

我一直在尝试将iCheck插件应用到我的收音机和复选框中,我无法弄清楚为什么我的单选按钮不断选择多个选项,没有JQuery经验,我想我可能需要帮助。我使用了最小的蓝色皮肤,所以我使用blue.png精灵图像jquery-1.11.3.min.js和icheck.js下载了blue.css。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="check.js"></script>


<link rel="stylesheet" href="blue.css">

<script>
 $(document).ready(function() {
    $('input').iCheck({
        checkboxClass: 'icheckbox_minimal-blue',
        radioClass: 'iradio_minimal-blue',
        increaseArea: '20%'//optional                                
    });
});
</script>
</head>
<label>
<div class="icheckbox_minimal-blue disabled">
    <input type="checkbox" name="quux[1]" disabled>
    </div>
    Foo
    </label>

<label for="baz[1]">Bar</label>
<div class="iradio_minimal-blue checked">
  <input type="radio" name="quux[2]" id="baz[1]" checked>
</div>

<label for="baz[2]">Bar</label>
   <div class="iradio_minimal-blue">
   <input type="radio" name="quux[2]" id="baz[2]">
</div></br>

<body>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您必须为所有无线电输入提供相同的名称。

<div class="iradio_minimal-blue checked">
  <input type="radio" name="quux" id="baz[1]" checked>
</div>

<label for="baz[2]">Bar</label>
   <div class="iradio_minimal-blue">
   <input type="radio" name="quux" id="baz[2]">
</div></br>