只允许选中一个复选框。 1 个复选框，每个复选框有两种独立的形式，都在一个页面上答案

【问题标题】：Allow only one checkbox selected. 1 checkbox each in two independent forms, all on one page只允许选中一个复选框。 1 个复选框，每个复选框有两种独立的形式，都在一个页面上
【发布时间】：2012-10-23 00:28:48
【问题描述】：

我有一个HTTP接口页面，需要用户上传各种独立文件。为此，我创建了多个表格，每个表格都有自己的表格。

在两个表中，我需要一个复选框，每个复选框允许用户选择它，然后需要在系统启动时安装文件。

两张表用于上传系统固件，一张用于主固件，另一张用于备份固件。

如果同时上传两个固件，系统将崩溃，因此需要单独的表格。

由于这个崩溃问题，对于两个复选框，它需要：一个被选中，或者另一个被选中，或者没有被选中。

这是一个示例 html 代码：

<body>

<div id="container"> 
 <table width="1000" border="0" cellpadding="1" class="uploadBox">
   <tr>
     <td width="460" rowspan="2">
      <form action="fileupload.html" method="post" enctype="multipart/form-data">
       <b>Update Primary System Firmware</b>
        <p style="margin-bottom: 2px"> <b>File: </b>
          <input type="file" name="firmwaremain" size="30" />
          <input type="submit" value="Upload" />
        </p>


    </td>
    <td width="210" height="23">Current File Name:</td>
    <td width="117">Current File Size:</td>
    <td width="102">File Upload Date:</td>
    <td width="93">Install on Start</td>
   </tr>
   <tr>
    <td>~curFirmName~</td>
    <td width="117">~curFirmSize~</td>
    <td width="102">~curFirmDate~</td>
    <td width="93"><input type="checkbox" name="firmPrim" id="firmPrim" /></td>
   </tr>
 </table>
 </form>

 <table width="1000" border="0" cellpadding="1">
   <tr>
    <td width="460" rowspan="2">
     <form action="fileupload.html" method="post" enctype="multipart/form-data">
      <b>Update Backup System Firmware</b>
        <p style="margin-bottom: 2px"><b>File: </b>
          <input type="file" name="firmwarebackup" size="30" /> 
          <input type="submit" value="Upload" />
        </p>

   </td>
   <td width="210" height="23">Current File Name:</td>
   <td width="117">Current File Size:</td>
   <td width="102">File Upload Date:</td>
   <td width="93">Install on Start</td>
  </tr>
  <tr>
   <td>~curBackName~</td>
   <td width="117">~curBackSize~</td>
   <td width="102">~curBackDate~</td>
   <td width="93"><input type="checkbox" name="firmBackup" id="firmBackup" /></td>
 </table>
 </form>
</div>

如您所见，它们的复选框采用两种独立的形式，因此我很难运行 JavaScript 代码，因为（我认为）它要求复选框采用一种形式。

我也不能使用单选按钮，因为它们的形式不同，而且必须有一个选项不能选择。

有没有办法验证整个页面并检查所有表单，以便在页面上只能选择一个复选框？

谢谢！

问候，乔什

【问题讨论】：

顺便说一句，波浪号（~）是通过c代码和xml传递到网页的文件。
为什么不使用默认选择无选项的收音机？
您可以将布尔值设置为 false，然后在两个表单中搜索复选框。如果你找到一个选中的设置它为真。如果您发现第二个已选中并且布尔值已经为真，则调用您的错误代码（将它们都设置为未选中或您需要做的任何事情）
它们有两种不同的形式。此外，一旦选中，除非您刷新页面，否则无法取消选中单选，这可能会导致系统崩溃
别在意 gilly 说什么会正常工作

标签： javascript html forms checkbox

【解决方案1】：

向两个复选框添加一个单击处理程序，如果单击的复选框被选中，则取消选中另一个表单中的复选框：

var primCheck = document.forms[0].firmPrim;
var backCheck = document.forms[1].firmBackup;
primCheck.onclick = checkClick;
backCheck.onclick = checkClick;

function checkClick(e) {
    var otherCheckbox = this === primCheck ? backCheck : primCheck;
    if (this.checked) {
        otherCheckbox.checked = false;
    }
}

工作演示： jsfiddle.net/QM6sy/1/

【讨论】：

Gilly，我更正了第二个 CheckBOX ID 名称，您的代码与我的名称一样吗？
@JoshC - 不。我的代码依赖于您的复选框名称相同的事实。稍等片刻，我将对其进行更新以使用您不同名称的复选框。
@Josh - 您还可以在处理表单提交时确定复选框的优先级，如果它们都被选中，例如实施一条规则，“如果两个复选框都被选中，则使用主系统固件和忽略另一个复选框”。这样一来，当我关闭 javascript 并在尝试查找攻击面时修改您的表单时，您将是安全的。
@Stephen P - 这如何处理两个表单和两个提交，并且它们是独立的。只是想知道？
@JoshC - 请注意，您的 HTML 存在一些问题。 <td> 中有 <form> 开始标签，但结束标签在表格之外。这是无效的 HTML。您应该将<form> 开始标记放在开始<table> 标记之前。此外，表格上的大多数属性都已弃用，取而代之的是 CSS。您可以删除高度、宽度、单元格间距和单元格填充属性。