Question

我有一系列用作单选按钮的复选框。这些需要保留复选框而不是单选按钮，以便与相同形式的其他复选框保持一致。问题是当用户在选择后想要取消所有选择时该怎么做。我的解决方案不允许这样做。单击所选复选框仅保持选中状态。 [编辑]由于“全部取消”一词似乎引起了一些混乱，让我尝试更好地解释一下。如下所示，使用我现在拥有的代码，如果用户选择一个复选框，然后选择另一个复选框，则该用户的第一个选择将被取消选中。问题是，如果用户现在决定取消选中其（当前选中的）第二选择，从而使所有复选框都未被选中，则他们将无法执行此操作，因为您不能取消选中某个复选框，除非选中另一个复选框。

$(".OverLen").on("click", function()
{
    Current = this.id;
    if($("#"+Current).prop("checked", true))
    {
        $(".OverLen").prop("checked", false);
        $("#"+Current).prop("checked", true);
    }
});

[编辑] 到目前为止，我发现的唯一解决方案是设置全局变量。但这似乎是一个尴尬的解决方案：

页面加载时：

OverLenID =''; //用于保存选定的OverLen ID

然后我将功能更改为：

  $(".OverLen").on("click", function()
  {
     var Current = this.id;
     if($("#"+Current).is(':checked'))
     {
        if(Current == OverLenID)
        {
           $("#"+Current).prop("checked", false);
           OverLenID = '';
        }
        else
        {
           $(".OverLen").not(this).prop("checked", false);
           OverLenID = Current;
        }
     }
     else
     {
        OverLenID = '';
     }
  });

HTML 自从被请求以来，这里是HTML的基础。所有复选框都包含在div中。 div没什么特别的，除了该div中包含3个div，每个div支持复选框行。一个普通的复选框如下所示：

<input type="checkbox" id="ThisCheckboxID" name="Acc[]" value="ThisValue" />
<label for="ThisCheckboxID">CheckboxLabelName</label><br />

带有“ OverLen”类的复选框如下所示：

<input class="OverLen" type="checkbox" id="OLA" name="Acc[]" value="OLA" />
<label for="OLA">Label Text A</label>
<div class="ANote">Info Text</div>
<input class="OverLen" type="checkbox" id="OLB" name="Acc[]" value="OLB" />
<label for="OLB">Label text B</label>
<div class="ANote">Info Text')</div>
<input class="OverLen" type="checkbox" id="OLC" name="Acc[]" value="OLC" />
<label for="OLC">Label Text C</label>
<div class="ANote">Info Text</div>

Answer 1

`type = "radio"`是你的朋友

省去麻烦并使用<input type="radio">，因为它们是为相互排斥的选择行为而设计的（即，一个组中只能检查一个）。
确保每个组共享相同的[name]属性值。在演示中，每个组名后缀为索引号cg。
所有电台都有唯一的#id和<label for= 电台ID >...。将所有无线电设置为display: none（或避开并隐藏）和style the <label>s to appear as checkboxes。

仅通过单独执行这三个步骤，您就不再需要在jQuery / JavaScript中实现该行为。扩展很容易，只需更改其他组的名称和ID中的单个字母即可（即使是动态生成也更容易）。

最后一个要求是，每个复选框都必须具有类似复选框的切换行为（即用户可以通过单击直接检查/取消选中）。这是通过简单的Vanilla JavaScript完成的。为了将来进行扩展，稳定，简单且可维护的代码将所有内容包装在<form>标记中，并使用HTMLFormElement API。演示中评论了更多详细信息。

// Register the click event to the <form>
var form = document.forms[0].onclick = fauxChx;

// Pass the Event Object (e)
function fauxChx(e) {
  /*
  Reference the clicked element's adjacent tag before it
  e.target is the clicked tag and .pES is the radio
  */
  const node = e.target.previousElementSibling;
  // if clicked tag is a label...
  if (e.target.matches('label')) {
    // and if the radio is checked...
    if (node.checked) {
      // uncheck it...
      node.checked = false;
    } else {
      // otherwise check it
      node.checked = true;
    }
  }
  /*
  By closing function the event no longer bubbles to 
  trigger anything else and by focusing on the label
  and excluding all other tags, we have isolated the
  event and as a result there are no conflicts. This
  programming pattern is called Event Delegation.
  */
  return false;
}

:root {
  font: 700 16px/1.25 Verdana;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

form {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

fieldset {
  width: fit-content;
}

.chx {
  display: none;
}

label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  margin-bottom: 9px;
  display: inline-block;
  font-size: 16px;
}

label::before {
  content: '';
  position: absolute;
  left: 0px;
  top: -3px;
  width: 20px;
  height: 20px;
  padding-left: 3px;
  padding-bottom: 3px;
  border: 1px groove #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
}

.chx:checked+label::before {
  content: '✔';
  font-size: 22px;
  line-height: 1.2;
  color: #09ad7e;
  transition: all .2s;
}

label::after {
  content: attr(for);
}

<form>
  <fieldset>
    <legend>fauxChx<br>Group 0</legend>
    <input id='cx0' name='cg0' class='chx' type='radio'>
    <label for='cx0'></label><br>
    <input id='cx1' name='cg0' class='chx' type='radio'>
    <label for='cx1'></label><br>
    <input id='cx2' name='cg0' class='chx' type='radio'>
    <label for='cx2'></label><br>
    <input id='cx3' name='cg0' class='chx' type='radio'>
    <label for='cx3'></label><br>
    <input id='cx4' name='cg0' class='chx' type='radio'>
    <label for='cx4'></label><br>
    <input id='cx5' name='cg0' class='chx' type='radio'>
    <label for='cx5'></label>
  </fieldset>

  <fieldset>
    <legend>fauxChx<br>Gruop 1</legend>
    <input id='cy0' name='cg1' class='chx' type='radio'>
    <label for='cy0'></label><br>
    <input id='cy1' name='cg1' class='chx' type='radio'>
    <label for='cy1'></label><br>
    <input id='cy2' name='cg1' class='chx' type='radio'>
    <label for='cy2'></label><br>
    <input id='cy3' name='cg1' class='chx' type='radio'>
    <label for='cy3'></label><br>
    <input id='cy4' name='cg1' class='chx' type='radio'>
    <label for='cy4'></label><br>
    <input id='cy5' name='cg1' class='chx' type='radio'>
    <label for='cy5'></label>
  </fieldset>

  <fieldset>
    <legend>fauxChx<br>Gruop 2</legend>
    <input id='cz0' name='cg2' class='chx' type='radio'>
    <label for='cz0'></label><br>
    <input id='cz1' name='cg2' class='chx' type='radio'>
    <label for='cz1'></label><br>
    <input id='cz2' name='cg2' class='chx' type='radio'>
    <label for='cz2'></label><br>
    <input id='cz3' name='cg2' class='chx' type='radio'>
    <label for='cz3'></label><br>
    <input id='cz4' name='cg2' class='chx' type='radio'>
    <label for='cz4'></label><br>
    <input id='cz5' name='cg2' class='chx' type='radio'>
    <label for='cz5'></label>
  </fieldset>
</form>

Answer 2

您可以使用此行取消选中同一类的所有其他复选框。

$(".OverLen").not(this).prop("checked", false);

因此您的函数将如下所示。

$(".OverLen").on("change", function()
{
   var $this = $(this); // cache this; very minor speed opt. 

    if( $this.prop("checked", true) )
    {
        $(".OverLen").not(this).prop("checked", false);
    }
});

jQuery复选框作为单选按钮，可以取消选中所有复选框

2 个答案:

`type = "radio"`是你的朋友

jQuery复选框作为单选按钮，可以取消选中所有复选框

2 个答案:

type = "radio"是你的朋友

`type = "radio"`是你的朋友