如果选中其他复选框，如何创建一个未选中其他复选框的无复选框

Posted 2023-05-08

【中文标题】如果选中其他复选框，如何创建一个未选中其他复选框的无复选框

【英文标题】：How to create a none checkbox that unchecked other checkboxes if it's selected

【发布时间】：2021-08-09 10:56:14

【问题描述】：

我如何创建一个以上都不是的复选框，所以当我选中该选项时，其余复选框应该被取消选中，如果我尝试检查其他选项 none em> 复选框应自动取消选中。

如果未选中 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://***.com/a/67618283/15979312

【问题讨论】：

我刚刚写了一个完美的纯 javascript 示例。在查看了您的问题后，我意识到它缺少任何 jQuery 或 JavaScript。你有任何 jQ/JS 代码可以作为minimal reproducible example 发布吗？

【参考方案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>

【讨论】：

看起来不错。一个问题：OP 要求创建一个不是上述选项的复选框，所以当我检查该选项时 - 似乎无法勾选“以上都不是”。它很好地自动打勾，但不能手动打勾。

@freedomn-m 抱歉，我错过了那部分，对“创建复选框”有点困惑。因为它已经被创建所以误解了最后一个要求

没有.first() $("[id^=box]").not($("#box4")).prop("checked",!$(this).is(":checked")) 也能正常工作

@freedomn-m 我之所以使用.first() 是因为操作员的要求说应该检查至少 1 个复选框。这就是为什么

【参考方案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>

【讨论】：

你为什么把它们结合起来？

它们中的任何一个都应该独立工作，答案之间的不同之处在于 Nikitas 和我的是我的将动态工作。因此，如果您添加更多复选框，则不必更改 js 代码。

如果我的答案没有按照您的意愿工作，那么您为什么不回复我的答案以便我可以改进它以便按您的意愿工作？当您结合这两个答案时，您的 get 代码会为同一目的多次运行，这通常是一个坏主意。

没关系，我只是想教你这个网站的工作原理:)

【参考方案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>

【讨论】：

你为什么做了2个答案？

@EnterNam 尝试选择 item2 然后再次取消选择它，然后什么都没有选择。

@CarstenLøvboAndersen，我不明白你的意思。能详细告诉我吗？

@Nikita 我不明白你为什么要投票？代表对你来说意味着这么多吗？根据您回答的质量，您是否赞成或反对。

@Nikita 请了解该网站的运作方式，如果您应该谈论与问答相关的问题，您应该将其保留在 Stack Overflow 上，否则其他人可能很难看到背后的想法问题/答案。还说在更新答案之前您需要投票是很糟糕的。如果你的回答很好，它通常会被点赞，所以你不应该要求它。