0 
<tr>
<td><b>If the registration is for either a Consultant or End User Business</b></td>
    <td>&nbsp;</td>     <td>Please tick box (multiple choice) their area of business</td></tr Question being asked
<td align="right"><b>Consultant or End User: </b>
<td><font color="red">*</font></td>
<td><input type="checkbox" name="Data" value="Yes">Data Centres
  <br />
  <input type="checkbox" name="Power" value="Yes">Power Plants
  <br />
  <input type="checkbox" name="Mining" value="Yes">Mining
  <br />
  <input type="checkbox" name="Telecom" value="Yes">Telecom
  <br />
  <input type="checkbox" name="Governmental" value="Yes">Governmental
  <br />
  <input type="checkbox" name="Airports" value="Yes">Airports
  <br />
  <input type="checkbox" name="Hotel" value="Yes">Hotel/Residential
  <br />
  <input type="checkbox" name="Healthcare" value="Yes">Healthcare 
  <br />
  <input type="checkbox" name="Shopping" value="Yes">Shopping Complex
  <br />
  <input type="checkbox" name="Industries" value="Yes">Industries / Manufacturing
  <br />
  <input type="checkbox" name="Transport" value="Yes">Transport
  <br />
  <input type="checkbox" name="Utilities" value="Yes">Utilities
  <br />
  <input type="checkbox" name="Water" value="Yes">Water Treatment
  <br />
  <input type="checkbox" name="Construction" value="Yes">Construction
  <br />
  <input type="checkbox" name="Other" value="Yes">Other
  <br />

</td>   </tr>   <tr> <td colspan="3" align="center" bgcolor="#dadada"> </tr>
<tr>

回答が提供された場合にチェックするチェックボックス

更新：ここにテキストフィールドのコードがあります

    <tr> 
      <td align="right"><strong>Consulting Company Name: </strong><font color="red">*</font></td> 
      <td><input size="30" name="ConCompany" class="required"/></td> 
   </tr>
4

2 に答える 2

0

最初のステップでは、JavaScript を介してイベントハンドラーを追加できる ID をテキストフィールドに追加します。

  <td><input id="company" size="30" name="ConCompany" class="required"/></td>

イベントハンドラを追加:

document.getElementById('company').addEventListener('change', setCheckboxesRequired);

必要なすべてのチェックボックスを設定する関数を作成します。

function setCheckboxesRequired() {
  var allInputs, allCheckboxes, textValue, bSetRequired, tmpInput, tmpCheckbox;

  // Retrieve all input elements
  allInputs = document.getElementsByTagName('input');
  allCheckboxes = [];

  // put all inputs with type = checkbox in allCheckboxes variable
  for (var i = 0; i < allInputs.length; i++) {
    tmpInput = allInputs[i];

    if (tmpInput.type === 'checkbox') {
      allCheckboxes.push(tmpInput);
    }
  }

  // determine if class should be set
  textValue = document.getElementById('company').value;
  if (textValue === null || textValue === "") {
    bSetRequired = false;
  } else {
    bSetRequired = true;
  }

  // iteration through all checkboxes
  for (var j = 0; j < allCheckboxes.length; j++) {
    tmpCheckbox = allCheckboxes[j];

    // set or delete class
    if (bSetRequired) {
      tmpCheckbox.className = tmpCheckbox.className + ' required';
    } else {
      tmpCheckbox.className = tmpCheckbox.className.replace('required', '');
    }
  }
}

または、「必須」クラスの代わりにHTML5必須属性を設定する場合は、最後の for ループを次のように変更します。

  for (var j = 0; j < allCheckboxes.length; j++) {
    tmpCheckbox = allCheckboxes[j];
    tmpCheckbox.required = bSetRequired;
  }
于 2013-11-12T10:54:42.420 に答える