使用jQuery Validate与验证场景作斗争。如果文本字段有值，我至少需要选中一个复选框。我发现了如何要求一个组中至少有一个复选框，而不是基于不同字段的值。
<input type="checkbox" name="a" value="x">
<input type="checkbox" name="b" value="y">
<input type="checkbox" name="c" value="z">
<input type="text" name="textfield">
如果"文本字段"中有任何值，则必须至少选中三个复选框中的一个。如果"文本字段"中没有值，则可以选中或不选中复选框——这不是必需的。
<form id="myform">
<input type="checkbox" class="foo" name="a" value="x">
<input type="checkbox" class="foo" name="b" value="y">
<input type="checkbox" class="foo" name="c" value="z">
<input type="text" name="textfield">
<input type="submit">
</form>
$(document).ready(function() {
$('#myform').validate({
rules: {
a: {
require_from_group: function() {
if ($('[name="textfield"]').is(':filled')) {
return [1, ".foo"];
}
}
},
b: {
require_from_group: function() {
if ($('[name="textfield"]').is(':filled')) {
return [1, ".foo"];
}
}
},
c: {
require_from_group: function() {
if ($('[name="textfield"]').is(':filled')) {
return [1, ".foo"];
}
}
},
textfield: {
required: true
}
},
errorPlacement: function(error, element) {
error.insertBefore(element);
}
});
});
https://jsfiddle.net/s62h8or1/
你可以检查一下，希望它能帮助你
let checkBox_i = $("input[name='a']");
let checkBox_ii = $("input[name='b']");
let checkBox_iii = $("input[name='c']");
let text = $("input[name='textfield']");
$(':input').on('input', validateInput)
function validateInput() {
let a = text.val().trim();
let b = checkBox_i.is(':checked');
let c = checkBox_ii.is(':checked');
let d = checkBox_iii.is(':checked');
//checks if text extsts and checks any one of checkbox is checked
if (a.length > 0 && (b || c || d)) {
//your code
$('.validStatus').text('valid input');
} else {
//uncheck checkbox if input is removed
checkBox_i.prop('checked', false);
checkBox_ii.prop('checked', false);
checkBox_iii.prop('checked', false);
//alert user for invalid input
$('.validStatus').text('');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="a" value="x">
<input type="checkbox" name="b" value="y">
<input type="checkbox" name="c" value="z">
<input type="text" name="textfield">
<div class='validStatus'></div>