自定义样式的复选框的change事件监听

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

 <style>
      .base-checkbox {
        font-size: 24px;
        color: #ffffff;
        position: relative;
        cursor: pointer;
        font-weight: normal;
         overflow: hidden; 
        padding-left: 34px;
      }
      .base-checkbox input[type="checkbox"] {
        width: 22px;
        height: 22px;
        width: 1px;
        height: 1px; 
        position: absolute;
        left: -22px;
        top: 0;
      }
      .base-checkbox::before {
        content: " ";
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 1px solid #ed9429;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        cursor: pointer;
      }
      .base-checkbox.checked:before {
        background-color: #ed9429;
      }
</style>
<label class="base-checkbox checked"><input checked type="checkbox" name="checkbox" />自定义样式的复选框</label>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
 <script>
      //复选框
      $(".base-checkbox").click(function(e) {
        var that = this;
        e.preventDefault();
        var inputEle = $(that).find('input[type="checkbox"]')[0];
        inputEle.checked = !inputEle.checked;
        if (inputEle.checked) {
          $(that).addClass("checked");
        } else {
          $(that).removeClass("checked");
        }
      });
    </script>

 

来源：oschina

链接：https://my.oschina.net/liyoungs/blog/3155734