【发布时间】：2019-05-22 14:47:18
【问题描述】：
我有一系列充当单选按钮的复选框。这些需要保留复选框而不是单选按钮，以与相同形式的其他复选框保持一致。问题是当用户在做出选择后想要取消选中所有选项时该怎么做。我的解决方案不允许这样做。单击选定的复选框只会保持选中状态。 [编辑} 由于短语“取消选中所有”似乎引起了一些混乱，让我试着更好地解释一下。使用我现在的代码，如下所示，如果用户选择一个复选框，然后选择另一个复选框，则该用户的第一个选择将取消选中。问题是，如果现在用户决定取消选中他们的（当前选中的）第二个选择，这将使所有复选框都处于未选中状态，他们不能这样做，因为一旦选中一个框，您就不能取消选中它，除非选中另一个框.
$(".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>
【问题讨论】：
-
$(".OverLen").not(this).prop("checked", false); -
@bassxzero 对不起 - 我误解了。那并不能解决问题。虽然，谢谢，它确实消除了一行代码。也许我应该使用 onchange ...
-
@RationalRabbit 请发布 HTML，您曾提到还有其他组的复选框。盲目地写代码是浪费时间。
-
@zer00ne - 尊敬的，这无关紧要。复选框是复选框。唯一相关的因素是每个人都有一个唯一的 ID，他们确实这样做了。
-
@RationalRabbit 然后我假设每个复选框都由一个匹配的标签进行。每个复选框/标签对后跟一个 br。整组复选框/标签对嵌套在一个字段集中，而该字段集中又嵌套在一个表单中。该组的取消选中/选中所有复选框（及其标签）嵌套在图例中。你的问题的措辞有点难以理解——提到“取消选中所有”，这意味着你指的是每个复选框的切换行为或你有（或需要）取消选中/选中所有主复选框（嵌套在图例中的那个）.. 不确定。