利用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('');
        }
    }

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

状态：        

               

 是 



 否 

参考链接