如何创建取消选中其他复选框(如果已选中)的无复选框

Question

我如何创建一个不属于的复选框，这样当我选中该选项时，剩余的复选框应该被取消选中，如果我尝试选中其他选项，none复选框应该自动取消选中。

此外，如果未选中none复选框，则应强制用户选中剩余的至少1个复选框。

<label for="box1">
<input id="box1" type="checkbox" name="nums" value="1" >
item 1</label>
<label for="box2">
<input id="box2" type="checkbox" name="nums" value="2" class="check">
item2</label>
<label for="box3">
<input id="box3" type="checkbox" name="nums" value="3" class="check">
item3</label>
<label for="box4">
<input id="box4" type="checkbox" name="nums" checked="checked" value="none">
none of the above</label>

它不像主复选框

https://stackoverflow.com/a/67618283/15979312

Answer 1

你可以这样做：

$("[id^=box]").change(function() {
if ($(this).is("#box4")){
$("[id^=box]").not($("#box4")).first().prop("checked",!$(this).is(":checked"))
} else {
$("#box4").prop("checked", !$("[id^=box]").not($("#box4")).is(":checked"));
}
});

如果3个第一个复选框中没有一个被选中，复选框4将被选中，如果前3个复选框的1被选中，则不选中。

演示

$("[id^=box]").change(function() {
if ($(this).is("#box4")){
$("[id^=box]").not($("#box4")).first().prop("checked",!$(this).is(":checked"))
} else {
$("#box4").prop("checked", !$("[id^=box]").not($("#box4")).is(":checked"));
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="box1">
<input id="box1" type="checkbox" name="nums" value="1" >
item 1</label>
<label for="box2">
<input id="box2" type="checkbox" name="nums" value="2" class="check">
item2</label>
<label for="box3">
<input id="box3" type="checkbox" name="nums" value="3" class="check">
item3</label>
<label for="box4">
<input id="box4" type="checkbox" name="nums" checked="checked" value="none">
none of the above</label>

Answer 2

我把上面的两个答案组合在一起，这很有效。

$('#checkbox input').click(function() {
if($(this).attr('id') == 'box4') {
if ($('input#box4:checked').length) {
$("input#box1").prop("checked", false);
$("input#box2").prop("checked", false);
$("input#box3").prop("checked", false);
} else {
$("input#box1").prop("checked", true);
}
} else if ($('input#box1:checked').length || $('input#box2:checked').length || $('input#box3:checked').length) {
$("input#box4").prop("checked", false);
}
});
$("[id^=box]").change(function() {
if ($(this).is("#box4")){
$("[id^=box]").not($("#box4")).first().prop("checked",!$(this).is(":checked"))
} else {
$("#box4").prop("checked", !$("[id^=box]").not($("#box4")).is(":checked"));
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkbox">
<label for="box1">
<input id="box1" type="checkbox" name="nums" value="1" >
item 1</label>
<label for="box2">
<input id="box2" type="checkbox" name="nums" value="2" class="check">
item2</label>
<label for="box3">
<input id="box3" type="checkbox" name="nums" value="3" class="check">
item3</label>
<label for="box4">
<input id="box4" type="checkbox" name="nums" checked="" value="none">
none of the above</label>
</div>

Answer 3

$('#checkbox input').click(function() {
if($(this).attr('id') == 'box4') {
if ($('input#box4:checked').length) {
$("input#box1").prop("checked", false);
$("input#box2").prop("checked", false);
$("input#box3").prop("checked", false);
} else {
$("input#box1").prop("checked", true);
}
} else {
if ($('input#box1:checked').length || $('input#box2:checked').length || $('input#box3:checked').length) {
$("input#box4").prop("checked", false);
} else {
$("input#box4").prop("checked", true);
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkbox">
<label for="box1">
<input id="box1" type="checkbox" name="nums" value="1" >
item 1</label>
<label for="box2">
<input id="box2" type="checkbox" name="nums" value="2" class="check">
item2</label>
<label for="box3">
<input id="box3" type="checkbox" name="nums" value="3" class="check">
item3</label>
<label for="box4">
<input id="box4" type="checkbox" name="nums" checked="" value="none">
none of the above</label>
</div>