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>

自定义表单复选框

1 个答案: