自定义表单复选框答案

【问题标题】：Customise checkbox for forms自定义表单复选框
【发布时间】：2015-03-12 09:06:16
【问题描述】：

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

    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>

【问题讨论】：

也许我不明白你在问什么，但它和以前完全一样——标签切换复选框，复选框在浏览器中只是“不可见”。

标签： html forms css checkbox

【解决方案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>

【讨论】：