利用HTML的for属性实现CheckBox效果

HTML原生自带的checkbox样式不符合ui要求，需要前端自定义样式，这里我们使用label搭配input，利用for属性关联两个标签。（图标使用iconfont）

然后点击图标的时候修改input的value值

$(".js-checkbox").on("click", function(e){//多选框
      e.stopPropagation();
      e.preventDefault();
      var obj_id = $(this).attr('for');
        if($(this).hasClass('clbebe')){
          //找到绑定的input
          $('#' + obj_id).val(1);
          $(this).removeClass('clbebe').addClass('typo_lgreen').html('');
        }else{
          $('#' + obj_id).val(0);
          $(this).removeClass('typo_lgreen').addClass('clbebe').html('');
        }
    }

可以使用如下代码查看效果：

<span>状态：</span>        
<div class="checkbox checkbox-success checkbox-inline" style="margin-right: 0px;">
               
<input type="checkbox" id="state1" value="1" name="statusName" checked>
<label for="state1"> 是 </label>
</div>
<div class="checkbox checkbox-success checkbox-inline" style="margin-right: 0px;">
<input type="checkbox" id="state2" value="0" name="statusName" checked>
<label for="state2"> 否 </label>
</div>

参考链接