Checkbox not showing once checked on our website - html

Question

I am trying to get the checked checkbox to show up on our website. If you go to this page and choose a pricing plan: https://www.shiftdivorceguide.com/submit-listing/ then scroll to the bottom of the next page we have two check boxes, "I agree" and "Already have an account".
When I check them they disappear and I want them to show with a check mark in them.
HTML for I agree checkbox
<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;
}
If I change this to to display:inline a second smaller box displays and if I check it on I Agree it jumps to the right. When I check the box the :Before instance disappears in the code along with the box on the screen
I would like the nicer larger box (not the smaller box) to remain and show as checked when someone checks it.
Can anyone point me in the right direction on how to fix this?
Thanks in advance!

Answer 1

According to what I understood you want to hide the first checkbox when clicked and the second one to remain. If that's what you want here is a potential solution to your problem:
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>
and JavaScript
function hidePolicyCheckbox() {
var policyCheckbox = document.getElementById("policycheck");
if (policyCheckbox.checked === true){
policyCheckbox.style.display = "block";
} else {
policyCheckbox.style.display = "none";
}
}
If you want your second checkbox not to move up when the first one disappear you can use policyCheckbox.style.visibility = "hidden"; instead of policyCheckbox.style.display = "none";
Is this what you are trying to achieve?