先来看段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();<!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');版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231951.html原文链接：https://javaforall.net
