在我们的网站上选中后，复选框未显示

Question

我正在尝试让选中的复选框显示在我们的网站上。如果您转到此页面并选择定价计划：https://www.shiftdivorceguide.com/submit-listing/ 然后滚动到下一页的底部，我们有两个复选框，“我同意”和“已经有一个帐户”。

当我检查它们时，它们会消失，我希望它们显示为带有复选标记。

HTML 我同意复选框

<div class="checkbox form-group col-md-4 check_policy termpolicy">
    <input id="policycheck" type="checkbox" name="policycheck" value="true">
        <label for="policycheck">
            <a target="_blank" href="https://www.shiftdivorceguide.com/terms-and-conditions/" class="help">I Agree</a>
        </label>
</div>

CSS：

.checkbox input[type=checkbox] {
    display: none;
}
.checkbox label:before { /*This is the css code for the existing checkbox*/
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    top: 3px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    border-radius: 2px;
}

如果我将其更改为display:inline，则会显示第二个较小的框，如果我选中它，我同意它会跳到右侧。当我选中该框时，:Before 实例与屏幕上的框一起消失在代码中

我希望更好的大框（而不是小框）保留并在有人检查时显示为已选中。

谁能指出我如何解决这个问题的正确方向？

提前致谢！

Answer 1

据我了解，您希望在单击时隐藏第一个复选框并保留第二个复选框。如果这就是您想要的，这里是您问题的潜在解决方案：

HTML

<form onSubmit="yourSubmitFunction()">
  <div id="policycheck">
    <input type="checkbox" name="policycheck" value="PolicyCheck" onclick="hidePolicyCheckbox()"> I agree
  </div>
  <div id="existingAccount">
    <input type="checkbox" name="alreadyHaveAnAccount" value="alreadyHaveAnAccount"> Already have an account
  </div>
  <input type="submit" value="Submit">
</form>

和 JavaScript

function hidePolicyCheckbox() {
  var policyCheckbox = document.getElementById("policycheck");
  if (policyCheckbox.checked === true){
    policyCheckbox.style.display = "block";
  } else {
    policyCheckbox.style.display = "none";
  }
}

如果您希望第二个复选框在第一个复选框消失时不向上移动，您可以使用 policyCheckbox.style.visibility = "hidden"; 而不是 policyCheckbox.style.display = "none";

这是你想要达到的目标吗？