如何检查是否至少2个复选框(在多个组)被选中在另一个if语句?

Question

我有这个代码，这是漂亮的工作。如果文本输入字段为空，它只是禁用提交按钮。

$(document).ready(function() {
$('input[required]').on('keyup', function() {
var empty = false;

$('input[required]').each(function() {
var val = $(this).val().trim();

if (val.length == 0 || typeof val == 'undefined') {
empty = true;
}
})

if (empty) {
$('#register').css('opacity', '0.2').attr('disabled', 'disabled');
} else {
$('#register').css('opacity', '1').removeAttr('disabled');
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" required>
<input type="text" required>
<button type="button" id="register">register</button>

然而，我在页面上也有多个复选框组。它们有不同的组名。

我如何在这段代码中包含一个检查来检查所有复选框组中至少有2个复选框被选中?

Answer 1

您可以使用纯JSthis.checked来检查复选框是否被选中，并使用一个简单的计数器:

var checked = 0;
if (this.checked) {
checked += 1;
}

那么你可以不检查if (empty) {...}，而检查if (checked < 2) {...}。

工作的例子:

$(document).ready(function(){
$('input[type=checkbox][required]').on('change', function() {
var checked = 0;

$('input[type=checkbox][required]').each(function(){
if (this.checked) {
checked += 1;
}
});

if (checked < 2) {
$('#register').css('opacity', '0.2').attr('disabled', 'disabled');
} else {
$('#register').css('opacity', '1').removeAttr('disabled');
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="test[]" required>
<input type="checkbox" name="test[]" required>
<button type="button" id="register">register</button>

---

如果您还想检查多个组，您可以首先使用额外的each()循环获取所有组名称:

var groups = [];

$('input[type=checkbox][required]').each(function() {
groups.push(this.name);
});

，过滤掉重复项:

groups = groups.filter( (x, i) => groups.indexOf(x) === i );

，然后遍历组名，像上面的例子一样进行检查，并计算检查过的组:

var checked_groups = 0;
for (i = 0; i < groups.length; i++) {
...
if (checked > 1) {
checked_groups += 1;
}
}

最后，您不会检查true变量，而是检查:

if (checked_groups < groups.length) {...}

工作的例子:

$(document).ready(function() {
$('input[type=checkbox][required]').on('change', function() {
var groups = [];

$('input[type=checkbox][required]').each(function() {
groups.push(this.name);
});

groups = groups.filter( (x, i) => groups.indexOf(x) === i );
var checked_groups = 0;

for (i = 0; i < groups.length; i++) {
var checked = 0;

$('input[type=checkbox][required][name="' + groups[i] + '"]').each(function() {
if (this.checked) {
checked += 1;
}
});

if (checked > 1) {
checked_groups += 1;
}
}

if (checked_groups < groups.length) {
$('#register').css('opacity', '0.2').attr('disabled', 'disabled');
} else {
$('#register').css('opacity', '1').removeAttr('disabled');
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="test[]" required>
<input type="checkbox" name="test[]" required>
<input type="checkbox" name="foo[]" required>
<input type="checkbox" name="foo[]" required>
<button type="button" id="register">register</button>

Answer 2

因为你正在使用jQuery，你可以利用它-也可以使用纯JavaScript。

这是两者的轻微混合。我利用代码和CSS中的数据属性来管理-但这也可以改变为使用真正的复选框，单选按钮等。你提到了复选框，但你所有的输入都是文本，所以我选择了你的代码与描述。

代码中的大量注释可以并且应该在最终版本中删除。

$(function() {
$('#register').on('set-allowed', function() {
let inputGroups = $('.check-wrapper');
let groupInputsWithValue = inputGroups.filter(function() {
return $(this).data("has-entry") == 'yes';
});
let hasNoEntry = !(inputGroups.length == groupInputsWithValue.length || groupInputsWithValue > 1);
//console.log("button:", hasNoEntry, inputGroups.length, groupInputsWithValue.length);
// use prop not attr
$(this).prop('disabled', hasNoEntry);
});
// use a change rather than a keyup to keep it less noisy
$('input[required]').on('change', function() {
let inputGroup = $(this).closest('.check-wrapper');
let groupCount = inputGroup.find('input[required]').length;
// now check all the inputs for a value
let groupInputsWithValue = inputGroup.find('input[required]').filter(function() {
let inputfield = $(this);
let val = inputfield.val().trim();
let notEmpty = val.length > 0;
return notEmpty;
});
let showGood = groupInputsWithValue.length > 0;
// we use attr here as .data() does show in the DOM and thus to CSS
//inputGroup.attr('data-has-entry', showGood ? 'yes' : 'no');
//native JavaScript dataset to do the same thing:
inputGroup.get(0).dataset.hasEntry = showGood ? 'yes' : 'no';
$('#register').trigger('set-allowed');
//console.log(!!groupInputsWithValue.length, groupInputsWithValue.length);
}).first().trigger("change");
});

.check-wrapper {
border: solid #ffbbbb 1px;
padding: 0.5rem;
background-color: #ffdddd;
}
.check-wrapper[data-has-entry='yes'] {
border: solid green 1px;
background-color: #ddffdd;
}
#register {
background-color: #ddffdd;
cursor: not-allowed;
border: solid #d1d1d1 1px;
cursor: crosshair;
opacity: 1;
}
#register:disabled {
background-color: #ffaaaa;
color: #000000;
cursor: not-allowed;
border: solid #ff0000 1px;
opacity: 0.2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="check-wrapper">
<input type="text" required>
<input type="text" required>
</div>
<div class="check-wrapper">
<input type="text" required>
<input type="text" required>
</div>
<div class="check-wrapper">
<input type="text" required>
<input type="text" required> <input type="text" required>
</div>
<div class="check-wrapper">
<input type="text" required>
<input type="text" required>
</div>
<button type="button" id="register">register</button>