1 icheck插件的介绍
官网:iCheck官网地址
2 icheck的CDN引用方式
如果不愿意下载插件,可以通过CDN引入插件css和js
<link href="http://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>
3 icheck—动态设置选中
<input id="checkbox" type="checkbox" name="checkbox" value="1"> 复选框
假设有复选框,现在我们通过其进行演示:
(1) 复选框选中
$('input[type=checkbox]').iCheck('check');
(2) 复选框取消选中
$('input[type=checkbox]').iCheck('uncheck');
(3) 将选框的状态反向切换
$('input[type=checkbox]').iCheck('toggle');
(4) 选框禁用
$('input[type=checkbox]').iCheck('disable');
(5) 选框取消禁用
$('input[type=checkbox]').iCheck('enable');
4 icheck—回调
(1) ifChanged:选框状态改变时触发
$('input[type=checkbox]').on('ifChanged', function(){
})
(2) ifChecked:选框选中时触发
$('input[type=checkbox').on('ifChecked', function(){
})
(3) ifUnchecked:选框取消选中时触发
$('input[type=checkbox').on('ifUnchecked', function(){
})
5 举例
5.1
<body>
<input id="radio_1" type="radio" name="radio" value="1"> 单选1
<input id="radio_2" type="radio" name="radio" value="2"> 单选2
<script>
// 获取当前已选中的radio value
$('input:radio[id^="radio_"]:checked').val();
$(function () {
$('input:radio[id^="radio_"]:checked').on('ifClicked', function (event) {
//当点击某个选中的radio,获取当前的 radio 用 $(this).val();
$(this).val();
});
});
</script>
</body>