如何在JQuery中为复选框添加验证

Question

我有一个如下的表单，我想为JQuery添加vaidation，我尝试使用html必需的属性，但它不起作用，请在这个中帮助我

代码是

//question 1
<label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer1" type="checkbox" name="answers[]" value='1' required="required">
<span class="checkmark"></span>
</label>
//question 2
<label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer2" type="checkbox" name="answers[]" value='2' required="required">
<span class="checkmark"></span>
</label>
//question 3
<label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label>
<label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label><label class="container">
<input class="chk check_answer3" type="checkbox" name="answers[]" value='3' required="required">
<span class="checkmark"></span>
</label>

这是代码，在此页面中，用户必须为每个问题选择至少一个选项

Answer 1

首先，您需要在HTML中为相同名称的分组输入命名。使用.on(change function()，然后找到您正在使用的输入(元素($(this)并获取其名称。然后，我们编写一个条件，看看它是否被检查，如果是，从<input>名称组中删除任何其他检查实例。

编辑： 对每个输入执行功能，以检查onchange，然后如果输入的所有实例都有一个已检查元素，我们将禁用属性更改为false，从而解锁提交按钮。

如果您愿意，可以将显示消息和css添加到Jquery代码中，方法是在要显示信息的地方添加一个空的<div id="msg"></div>，然后调用该div的值，根据要传达的消息将文本放置在那里。

//--> Remove the code below if you do want the user to only select one option per 
//--> group and it is okay for them to select multiple options per group...
$(':checkbox').on('change', function() {
var th = $(this),
name = th.prop('name');
if (th.is(':checked')) {
th.attr('checked', 'checked');
$(':checkbox[name="' + name + '"]').not($(this)).prop('checked', false);
}
});
//--> This handles the locking of the submit button
function checkChecked(divId) {
var oneOfEachChecked = false;
$('#' + divId + ' input[type="checkbox"]').each(function() {
if ($(".check_answer1").is(":checked") && $(".check_answer2").is(":checked") && $(".check_answer3").is(":checked")) {
oneOfEachChecked = true;
$('#submit').prop('disabled', false);
$('#mash').show().text(' <--- Mash me now, I am unlocked!').css('background', 'lightgreen');
}
});
if (oneOfEachChecked === false) {
$('#submit').prop('disabled', true);
$('#mash').show().text(' X Sorry no go! X').css('background', '#FA3300');
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="divs" id="check_answer1">
//question 1
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer1" onchange="checkChecked('check_answer1')" type="checkbox" name="check_answer1" value="1">
<span class="checkmark"></span>
</div>
<div class="divs" id="check_answer2">
//question 2
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer2" onchange="checkChecked('check_answer2')" type="checkbox" name="check_answer2" value="2">
<span class="checkmark"></span>
</div>
<div class="divs" id="check_answer3">
//question 3
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
<label class="container"></label>
<input class="chk check_answer3" onchange="checkChecked('check_answer3')" type="checkbox" name="check_answer3" value="3">
<span class="checkmark"></span>
</div>
<input id="submit" type="submit" name="submit" value="submit" disabled><span id="mash"></span>
</form>