期望效果：

checkbox.jpg

示例代碼：
引入JQuery和font-awesome圖標

<link rel="stylesheet" >
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

CSS

 .checkbox-style{
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        width: 17px;
        height: 17px;
        line-height: 17px;
        box-sizing: border-box;
        border: 1px solid #a0a0a0;
    }
    .hide{
        display: none;
    }
    .show{
        display: inline-block;
    }

HTML:

  <div class="checkbox">
        <label class="label-checkbox " style="display: block;margin-bottom: 3%;">
            <input type="checkbox" class="checkbox  hide" name="card">
            <span class="checkbox-style"><i class="fa fa-check hide jifen-check" aria-hidden="true"></i></span>
            <span>會員卡號</span>
        </label>
      </div>

JS:

<script>
//    初始化默認被選中的
    if($(".label-checkbox input[type='checkbox']").is(':checked')){
        var a = $(".label-checkbox input[type='checkbox'][checked]");
        $(a).next().children(".jifen-check").addClass("show").removeClass("hide");
    }
    $(".label-checkbox input[type='checkbox']").change(function() {
        if($(this).is(':checked')){
            $(this).next().children(".jifen-check").addClass("show").removeClass("hide");
        }else{
            $(this).next().children(".jifen-check").addClass("hide").removeClass("show");
        }
    });

</script>