Флажок не отображается после того, как отмечен на нашем сайте

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";

Это то, что вы пытаетесь достичь?