html - 自定义表单复选框

Question

我正在尝试设置复选框的样式。下面的代码取自该站点上的另一个问题，似乎正是我要找的。但是，我不清楚何时在我的表单中使用它我可以检查表单发布时是否选中该框。谁能帮忙？

    input[type=checkbox] {
      display: none;
    }
    input[type=checkbox] + label {
      background: #999;
      height: 16px;
      width: 16px;
      display: inline-block;
      padding: 0 0 0 0px;
    }
    input[type=checkbox]:checked + label {
      background: #0080FF;
      height: 16px;
      width: 16px;
      display: inline-block;
      padding: 0 0 0 0px;
    }

<input type='checkbox' name='thing' value='valuable' id="thing" />
<label for="thing"></label>

Answer 1

 $("#myForm").submit(function(event) {
   console.log($('#thing').prop('checked'))
   if ($('#thing').prop('checked')) {
     alert("checked");
   } else {
     alert("does not checked");
   }
   event.preventDefault();
 });

    input[type=checkbox] {
      display: none;
    }
    input[type=checkbox] + label {
      background: #999;
      height: 16px;
      width: 16px;
      display: inline-block;
      padding: 0 0 0 0px;
    }
    input[type=checkbox]:checked + label {
      background: #0080FF;
      height: 16px;
      width: 16px;
      display: inline-block;
      padding: 0 0 0 0px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="myForm">
  <input type='checkbox' id="thing" />
  <label for="thing"></label>
  <input type="submit" />
</form>