只允许选中一个复选框。 1个复选框，分别以两种独立的形式出现在一页上

Question

我有一个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代码，因为（我认为）它要求复选框采用一种形式。

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

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

谢谢！

问候，乔希

Answer 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/

只允许选中一个复选框。 1个复选框，分别以两种独立的形式出现在一页上

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-10-23 00:37:13

只允许选中一个复选框。 1个复选框，分别以两种独立的形式出现在一页上

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-10-23 00:37:13

解决方案1
3 已采纳 2012-10-23 00:37:13