时间戳

首页 > 解决方案 > 为什么不是尽管设置了一些 JS 代码，但我的复选框上的属性仍然有效？

javascript - 为什么不是尽管设置了一些 JS 代码，但我的复选框上的属性仍然有效？

问题描述

是的，为什么仍然可以发送html我创建的表单而无需检查隐私政策同意checkbox，尽管 JS 代码要求用户checkbox需要检查要提交的表单？

我的浏览器是 Edge。

继承人的代码：

#agreeCheckbox{
	position: absolute;
	display: inline;
	margin-left: 5px;
	margin-bottom: 12000px;
	padding:5px;
	background-color: white;
}
#agreeCheckbox {
		display: none;
		margin-bottom: 20px;
}
input + .label-text:before{
	content:"\f046 ";
	font-family: Fontawesome;
	margin-right: 5px;
	display: inline-block;
	width: 1em;
	font-size: 15px;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
}
input:checked + .label-text:before{
	content: "\f096 ";
	font-family: Fontawesome;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 15px;
}
.label-text{
	font-size: 15px;
    color: #FFF;
    font-weight: normal!important;
    cursor: pointer!important;
}
.no-content:after{
	content: "";
	margin-top:5px;
    
}
<script>
function consentValidation() {
  var x = document.getElementById("myCheck").required;
  document.getElementById("demo").innerHTML = "You must consent to our Privacy Policy before submitting this form.";
}
</script>
<form method="post" action="../php/services-interest-form.php" enctype="multipart/form-data">

                                    <p class="legal-section-title" style="color: #FFF!important;">Privacy Notice</p>
                                    <p style="color: #FFF!important;">We want you to know how our service works and why we need your registration details. Please read our <a href="../pages/privacy policy.html">Privacy Policy</a> and then tick below that you agree with it.</p><br/>
                                    <label class="no-content" style="display: inline;">
                                        <input name="agreePP" id="myCheck" type="checkbox" value="true" required />
                                        <span class="label-text">I accept and agree to the Privacy Policy*</span>
                                        <p id="demo" class="label-text" style="color:red!important;">You must consent to our Privacy Policy before submitting this form.</p>
                                    </label>
                                </div><br/>
                                <input onClick="consentValidation()" class="std_button" type="submit" value="Submit"/>
                            </form>

除此之外，为什么当我删除checked属性时，复选框的默认状态是选中状态，反之亦然。当我插入checked属性时，默认状态保持未选中？

这也是一个自定义 css checkbox，因此为什么挖矿比大多数复杂一点。对此感到抱歉，但这是对我们隐私政策的同意，因此出于显而易见的原因，这需要 100% 正确。

老实说，这已经超出了一个笑话，但如果有人能对此有所了解，那就太好了。

谢谢

标签： javascripthtmlcss

解决方案

这很简单。您应该将它们包装在表单元素中：

<form>
...
</form>

以及您可能需要的其他属性，例如操作、方法。检查文档。

推荐阅读