javascript - 根据页面加载时选择的单选按钮显示某些字段

Question

我正在从数据库中拖动数据，并希望根据所选的单选按钮显示不同的禁用表单字段。

我尝试过使用 onload="javascript:...."但它不起作用。

HTML:

 <fieldset>
      <legend>Employment/Education Details</legend>
      <div class="input-wrapper">
         <label>Are you?<br>
         <input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="employed" id="employed" <?php if 
($employment_status=="employed") echo "checked"; ?> disabled><label for="employed">Employed</label>
         <input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="self_employed" id="self_employed"  <?php if 
($employment_status=="self_employed") echo "checked"; ?> disabled><label for="self_employed">Self Employed</label>
         <input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="student" id="student" <?php if 
($employment_status=="student") echo "checked"; ?> disabled><label for="student">Student</label>
         <input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="other" id="other" <?php if 
($employment_status=="other") echo "checked"; ?> disabled><label for="other">Other</label>
         </label>
      </div>
      <div id="college_nus" style="display:none">
         <div class="row">
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>College or NUS Number
                  <input type="text" name="college_nus"  value="<?php echo $college_nus; ?>" disabled>
                  </label>
               </div>
            </div>
         </div>
      </div>
      <div id="employment_details" style="display:none">
    <div class="row">
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Employer Name
                  <input type="text" name="employment_company" value="<?php echo $employment_company; ?>" disabld>
                  </label>
               </div>
            </div>
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Job Title
                  <input type="text" name="employment_title" value="<?php echo $employment_title; ?>" disabled>
                  </label>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Employment Address
                  <textarea name="employment_address" rows="4" value="<?php echo $employment_address; ?>" disabled></textarea>
                  </label>
               </div>
            </div>
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>
                     Occupation
                  <input type="text"  value="<?php echo $occupation; ?>" disabled>
                  </label>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Employment Email
                  <input type="text" name="employment_email"  value="<?php echo $employment_email; ?>" disabled>
                  </label>
               </div>
            </div>
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Employment Phone
                  <input type="text" name="employment_phone"  value="<?php echo $employment_phone; ?>" disabled>
                  </label>
               </div>
            </div>
         </div>
      </div>
   </fieldset>

Javascript:

function employmentCheck() {
    if (document.getElementById('student').checked) {
        document.getElementById('college_nus').style.display = 'block';
    }
    else document.getElementById('college_nus').style.display = 'none';

    if (document.getElementById('employed').checked || document.getElementById('self_employed').checked) {
        document.getElementById('employment_details').style.display = 'block';
    }
    else document.getElementById('employment_details').style.display = 'none';

}

有人可以帮忙吗？

Answer 1

我将函数更改为 window.onload 并且工作正常。这是一个笨蛋。

https://plnkr.co/edit/Pz2rKRg9geglgKhdJM4H?p=preview

这是函数

window.onload = function(){
    if (document.getElementById('student').checked) {
        console.log("student");
        document.getElementById('college_nus').style.display = 'block';
    }
    else {
        document.getElementById('college_nus').style.display = 'none';
    }

    if (document.getElementById('employed').checked ||  document.getElementById('self_employed').checked) {
        console.log("employed");
        document.getElementById('employment_details').style.display = 'block';
    }
    else {
        document.getElementById('employment_details').style.display = 'none';
    }
}

我认为单选按钮对象上没有定义 onload 事件。

谢谢

帕拉斯