jQuery iCheck Plugin 下处理单选按钮值切换
阎裕
先来看段html代码，如下：
<li style="width:560px;">
<i class="imc"></i><label>是否含权：</label>
<div class="skin-minimal" style="width:380px; float:left;">
<div class="radio-box ml-10 hasRight">
<input type="radio" name="hasRight" id="display-1" value="1" checked="checked" />
<label for="display-1" style="width: auto;">是</label>
</div>
<div class="radio-box hasRight">
<input type="radio" name="hasRight" id="display-2" value="0" />
<label for="display-2" style="width: auto;">否</label>
</div>
</div>
</li>要处理单选按钮的点击事件，会给元素绑定click事件，在事件处理函数中根据已选中的单选按钮的值进行不同处理，代码如下：
$("input[type='radio'][name='hasRight']").on("click",function(){
var radioVal = $(this).val();
if (radioVal == 0) {
//...
} else {
//...
}
});可是现在代码却未生效，查看js文件，发现如下代码
$('.skin-minimal input').iCheck({
checkboxClass: 'icheckbox-blue',
radioClass: 'iradio-blue',
increaseArea: '20%'
});询问同事，是使用了jQuery iCheck Plugin，项目中的处理是修改click事件绑定代码，如下
var hasRight = $(".hasRight").children();
hasRight.click(function(){
var skinval=$(this).text();
if(skinval == "是"){
// do something...
} else {
// do something...
}
});
$(".iCheck-helper",".hasRight").click(function(){
var valChk = $(this).siblings().val();
if(valChk == 1){
// do something...
} else {
// do something...
}
});至此，click事件生效
获取单选按钮的选中值，仍可按正常方式获取
var hasRight = $("input[type='radio'][name='hasRight']:checked").val();2018-04-21 补充
要实现根据单选按钮的选中状态不同而做不同的逻辑处理，有简单的方式，公司代码里的处理方式有点复杂
<!DOCTYPE html>
<html lang="en">
<head>
<title>Checkboxes and radio buttons customization (jQuery and Zepto) plugin</title>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<link href="./css/custom.css?v=1.0.2" rel="stylesheet">
<link href="../skins/all.css?v=1.0.2" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="../icheck.js?v=1.0.2"></script>
<script src="./js/custom.min.js?v=1.0.2"></script>
</head>
<body>
<div class="demo-list clear">
<ul>
<li>
<input tabindex="3" type="radio" id="input-3" value="3" name="demo-radio">
<label for="input-3">Radio button, <span>#input-3</span></label>
</li>
<li>
<input tabindex="4" type="radio" id="input-4" value="4" name="demo-radio" checked>
<label for="input-4">Radio button, <span>#input-4</span></label>
</li>
</ul>
<script>
$(document).ready(function(){
var callbacks_list = $('.demo-callbacks ul');
$('.demo-list input').on('ifChanged', function(event){
if($(this).context.checked){
alert($(this).context.value);
}
}).iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%'
});
});
</script>
</div>
</body>
</html>
以上代码是根据官方代码修改而来
//绑定iCheck插件提供的ifChanged事件，对应change事件
$('.demo-list input').on('ifChanged', function(event){
//由于iCheck插件对普通元素进行了封装，所以这里的this并不是我们期望的radio元素
//$(this).context才是我们期望的radio元素(DOM对象)
if($(this).context.checked){
alert($(this).context.value);
}
})设置单选按钮不可编辑
$('.skin-minimal').find("input[name='openMarket']").iCheck('disable');项目中使用iCheck插件时，需要导入icheck.js、jquery.js和skin文件夹
页面引用文件如下
<!-- 自定义的样式文件，需自己编写 -->
<link href="yourPath/custom.css" rel="stylesheet">
<!-- 以下三个文件需引用 -->
<link href="yourPath/skins/all.css" rel="stylesheet">
<script src="yourPath/jquery.js"></script>
<script src="yourPath/icheck.js"></script>设置默认选中
$('#areaType1, #level1').iCheck('check');
类似资料：