Javascript，當在文本框中放置答案時，如何使復選框成為必需

Question

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

Answer 1

使用具有某些id的button ，例如submitbtn按鈕

<input type="button" id="submitbtn" value="Submit" />

將id添加到您的textbox例如id=ConCompany

dd id s到您的復選框，如下所示：

<input type="checkbox" name="Data" id="10" value="Yes">Data Centres
  <br />
  <input type="checkbox" name="Power" id="11" value="Yes">Power Plants
  <br />
  <input type="checkbox" name="Mining" id="12" value="Yes">Mining
  <br />
  <input type="checkbox" name="Telecom" id="13" value="Yes">Telecom
  <br />
  <input type="checkbox" name="Governmental"  id="14" value="Yes">Governmental
  <br />
  <input type="checkbox" name="Airports" id="15" value="Yes">Airports
  <br />
  <input type="checkbox" name="Hotel" id="16" value="Yes">Hotel/Residential
  <br />
  <input type="checkbox" name="Healthcare" id="17" value="Yes">Healthcare 
  <br />
  <input type="checkbox" name="Shopping"  id="18" value="Yes">Shopping Complex
  <br />
  <input type="checkbox" name="Industries" id="19" value="Yes">Industries / Manufacturing
  <br />
  <input type="checkbox" name="Transport" id="20" value="Yes">Transport
  <br />
  <input type="checkbox" name="Utilities" id="21" value="Yes">Utilities
  <br />
  <input type="checkbox" name="Water"  id="22" value="Yes">Water Treatment
  <br />
  <input type="checkbox" name="Construction"  id="23" value="Yes">Construction

現在使用以下javascript：

document.getElementById('submitbtn').onclick = function () {
    if(document.getElementById('ConCompany').value != "")
     {
       var count = 0;
        for ( var i = 10 ; i <= 23 ; i++)
          {
             if(document.getElementById(i).value == "Yes")
                count++;
          }
       if(count == 0)
       {
         alert("Please select the area of business ");
          return;
       }
      }
      document.FormName.submit();
 }

Answer 2

在第一步中，我將向您的文本字段添加一個ID，以便您可以通過JavaScript添加事件處理程序。

  <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 必需屬性而不是“ required”類，請將最后一個for循環更改為以下內容：

  for (var j = 0; j < allCheckboxes.length; j++) {
    tmpCheckbox = allCheckboxes[j];
    tmpCheckbox.required = bSetRequired;
  }