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');

资源：
jQuery iCheck Plugin

项目中使用iCheck插件时，需要导入icheck.js、jquery.js和skin文件夹
页面引用文件如下

扫描二维码关注公众号，回复： 1017232 查看本文章

  <!-- 自定义的样式文件，需自己编写 -->
  <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>

jQuery iCheck Plugin 下处理单选按钮值切换

猜你喜欢