如果選中其他復選框，如何創建一個未選中其他復選框的無復選框

Question

如何創建一個不是上述任何選項的復選框，因此當我選中該選項時，其余復選框應取消選中，如果我嘗試檢查其他選項，則應自動取消選中無復選框。

還應該是，如果未選中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

我已經將 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>