HTML 复选框 - 只允许选中一个复选框答案

【问题标题】：HTML checkbox - allow to check only one checkboxHTML 复选框 - 只允许选中一个复选框
【发布时间】：2013-11-09 15:00:22
【问题描述】：

我的表格的每一行都有一些复选框。每个复选框都有name='myName'，因为我只想在每一行中选择一个复选框。但是我错过了一些东西，因为我能够检查所有这些：

但我想要这样的结果：

我在这里错过了什么？

【问题讨论】：

这不是复选框的工作方式，如果你想让它们像这样工作，你应该使用 javascript 来处理它。

标签： html checkbox

【解决方案1】：

唯一名称标识符适用于单选按钮：

<input type="radio" />

将您的复选框更改为收音机，一切都应该正常

【讨论】：

还有b这个代码可以使用stackoverflow.com/questions/9709209/…
您也可以识别复选框的唯一名称。检查stackoverflow.com/a/39405214/2545270

【解决方案2】：

根据设计，复选框旨在打开或关闭。它们不依赖于其他复选框，因此您可以根据需要打开和关闭任意数量的复选框。

然而，单选按钮被设计为只允许在任何时候选择组中的一个元素。

参考文献：

复选框：MDN Link

单选按钮：MDN Link

【讨论】：

【解决方案3】：

 $(function () {
     $('input[type=checkbox]').click(function () {
         var chks = document.getElementById('<%= chkRoleInTransaction.ClientID %>').getElementsByTagName('INPUT');
         for (i = 0; i < chks.length; i++) {
            chks[i].checked = false;
         }
         if (chks.length > 1)
            $(this)[0].checked = true;
     });
 });

【讨论】：

【解决方案4】：

sapSet = mbo.getThisMboSet()
sapCount = sapSet.count()
saplist = []

if sapCount > 1:
   for i in range(sapCount):`enter code here`
     defaultCheck = sapSet.getMbo(i)
     saplist.append(defaultCheck.getInt("HNADEFACC"))
   defCount = saplist.count(1)
   if defCount > 1:
      errorgroup = " Please Note: you are allowed"
      errorkey = "  only One Default Account"
   if defCount < 1:
      errorgroup = " Please enter "
      errorkey = "  at leat One Default Account"
else:
   mbo.setValue("HNADEFACC",1,MboConstants.NOACCESSCHECK)

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案5】：

$('#OvernightOnshore').click(function () {
    if ($('#OvernightOnshore').prop("checked") == true) {
        if ($('#OvernightOffshore').prop("checked") == true) {
            $('#OvernightOffshore').attr('checked', false)
        }
    }
})

$('#OvernightOffshore').click(function () {
    if ($('#OvernightOffshore').prop("checked") == true) {
        if ($('#OvernightOnshore').prop("checked") == true) {
            $('#OvernightOnshore').attr('checked', false);
        }
    }
})

上面的代码 sn-p 将允许您在单选按钮上使用复选框，但具有与单选按钮相同的功能，您只能选择一个。

【讨论】：