如何创建一个 none 复选框，如果它被选中，则取消选中其他复选框

Question

我如何创建一个 none 的复选框 所以当我选中该选项时，其余的复选框应该被取消选中，如果我尝试选中其他选项 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>

它不像主复选框

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 个复选框中的 none 被选中，复选框 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);
            } 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>

Answer 3

我将上面的 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>

如何创建一个 none 复选框，如果它被选中，则取消选中其他复选框

How to create a none checkbox that unchecked other checkboxes if it's selected

html

javascript

checkbox

jquery