Javascript 需要设置问题复选框
我正在寻找一些帮助,使复选框需要 我正在构建一个基于bootstrap4的表单。我通过引导文档中的JS示例验证表单,在表单中添加“novalidate”,在输入中添加“required”,并添加以下脚本:Javascript 需要设置问题复选框,javascript,jquery,html,css,bootstrap-4,Javascript,Jquery,Html,Css,Bootstrap 4,我正在寻找一些帮助,使复选框需要 我正在构建一个基于bootstrap4的表单。我通过引导文档中的JS示例验证表单,在表单中添加“novalidate”,在输入中添加“required”,并添加以下脚本: (function() { 'use strict'; window.addEventListener('load', function() { var form = document.getElementById('forms'); form.addEvent
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('forms');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
一切都进展顺利,但现在我有几个复选框,我只想在用户至少选中一个复选框的情况下验证它。我在想,我是应该制作一个不同的函数来验证这一点,还是在当前函数的基础上进行构建。不管是哪种情况,如果有人能帮助我,我将非常感激
这是复选框的代码:
<div class="form-row">
<div class="form-group col-md-4">
<label for="checkboxes">Indícios:</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="" type="checkbox" value="1">
1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="2">
2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="3">
3
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="4">
4
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="5">
5
</label>
</div>
</div>
<div class="form-group col-md-4">
<label for="checkboxes1"> </label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="checkboxes1" value="6">
6
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="7">
7.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="8">
8
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="9">
9
</label>
</div>
</div>
</div>
印度:
1.
2.
3.
4.
5.
 
6.
7.
8.
9
提前谢谢你 既然您提到使用jQuery,这里有一个函数可以添加到您的checkValidity方法中
function checkCheckboxes = function() {
return ($('.form-check-input:checked').length > 0);
};
此函数用于检查是否有class.form check输入和:checked状态的输入在html中可用。如果是,则复选框验证有效。感谢您的快速回复!我真的认为这就是我所需要的,我在我自己的tho中添加该函数时遇到了麻烦。我一直在努力,但似乎没有成功。顺便说一下,通过将其添加到checkValidity方法,验证样式也将应用于复选框,对吗?那太棒了。