0

ユーザーがさまざまな独立したファイルをアップロードする必要がある HTTP インターフェイス ページがあります。このために、それぞれが独自のフォームを持つ複数のテーブルを作成しました。

2 つのテーブルでは、ユーザーがそれを選択できるチェックボックスがそれぞれ 1 つ必要です。これには、システムの起動時にファイルをインストールする必要があります。

どちらのテーブルもシステム ファームウェアのアップロード用で、1 つのテーブルはプライマリ ファームウェア用で、もう 1 つのテーブルはバックアップ ファームウェア用です。

両方のファームウェアがアップロードされている場合、システムがクラッシュするため、別々のフォームになります。

このクラッシュの問題のため、2 つのチェックボックスは、1 つが選択されているか、もう 1 つが選択されているか、どちらも選択されていない必要があります。

サンプルの 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>

ご覧のとおり、チェックボックスは 2 つの独立した形式になっているため、チェックボックスを 1 つの形式にする必要があるため (私が思うに)、JavaScript コードを実行するのは困難でした。

また、ラジオボタンは異なる形式であるため使用できません。さらに、どちらも選択しないオプションが必要です。

ページ全体を検証し、すべてのフォームをチェックして、ページで 1 つのチェック ボックスのみを選択できるようにする方法はありますか?

ありがとう！

よろしく、ジョシュ

4

1 に答える 1

3

クリックされたチェックボックスがチェックされている場合、他のフォームのチェックボックスをオフにするクリックハンドラーを両方のチェックボックスに追加します。

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/

于 2012-10-23T00:37:13.267 に答える