先来看段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();
-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');
资源：
jQuery iCheck Plugin
项目中使用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');
