只允許選中一個復選框。 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