Показать/скрыть div Ошибка Javascript

Question

Мне нужна помощь с этой скрипкой. Рабочий процесс:

1. Выберите гражданский статус
2. Если выбрать значение = 1, показать скрытые DIV с 2 кнопками радио.
3. Если да, покажите 2-й скрытый div с 2 переключателями.
4. Если да, покажите 3-й скрытый div с полем ввода текста.
5. После ввода заполняется, отображается скрытая следующая кнопка.
6. Если выбрано значение 0, ответ нет, 2-й ответ нет, показывается скрытый Следующий.

Код работает для меня на моем локальном сохранении до последнего радиообмена, но когда я его не выбираю, кнопка «Далее» не отображается.

Помогите мне исправить код?

function showDiv(elem) { 
 
    switch (elem.value) { 
 
    case '1': 
 
     document.getElementById('questionHIDDEN').style.display = 'block'; 
 
     document.getElementById('employedHIDDEN').style.display = 'none'; 
 
     document.getElementById('numberinputHIDDEN').style.display = 'none'; 
 
     document.getElementById('stepsHIDDEN').style.display = 'none'; 
 
     break; 
 
    case '0': 
 
     document.getElementById('stepsHIDDEN').style.display = 'block'; 
 
     break; 
 
    } 
 
}; 
 

 
$(document).ready(function() { 
 

 
    $('input[name="employed"]').click(function() { 
 
    if ($(this).attr("value") == "no") { 
 
     $("#stepsHIDDEN").show(); 
 
     $("#employedHIDDEN").hide(); 
 
     $("#numberinputHIDDEN").hide(); 
 
    } else if ($(this).attr("value") == "yes") { 
 
     $("#employedHIDDEN").show(); 
 
     $("#stepsHIDDEN").hide(); 
 
    } else { 
 
     $("#stepsHIDDEN").hide(); 
 
    } 
 
    }); 
 

 
    $('input[name="epworking"]').click(function() { 
 
    if ($(this).attr("value") == "no") { 
 
     $("#stepsHIDDEN").show(); 
 
     $("#numberinputHIDDEN").hide(); 
 
    } else 
 
     $("#numberinputHIDDEN").show(); 
 
    $("#stepsHIDDEN").hide(); 
 
    }); 
 

 
    $('input[name=fname]').keyup(function() { 
 
    if ($(this).val().length == 6) { 
 
     $('#stepsHIDDEN').show(); 
 
    } else 
 
     $('#stepsHIDDEN').hide(); 
 
    }); 
 

 
});

#questionHIDDEN, 
 
#employedHIDDEN, 
 
#numberinputHIDDEN, 
 
#stepsHIDDEN { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<main> 
 
    <div id="content"> 
 
    <div id="text"> 
 
     <h4>2/3 Civil Status</h4> What is your civil status? 
 
     <br> 
 
     <br> 
 
     <select name="status" id="soflow2" onchange="showDiv(this)"> 
 
     <option>Select</option> 
 
     <option value="0">Single</option> 
 
     <option value="1">Married</option> 
 
     <option value="1">Registered Legal Partnership</option> 
 
     <option value="1">Remarried</option> 
 
     <option value="0">Legally Separated</option> 
 
     <option value="0">Divorced</option> 
 
     <option value="0">Widowed</option> 
 
     <option value="1">Informal Partnership</option> 
 
     </select> 
 
     <div id="spouse"> 
 
     <table id="questionHIDDEN"> 
 
      <tr> 
 
      <td> 
 
       Is your spouse/legal partner employed? 
 
      </td> 
 
      </tr> 
 

 
      <tr> 
 
      <td class="left"> 
 
       <form> 
 
       <span class="radiobutton"><input type="radio" name="employed" value="yes"> Yes </span> 
 
       <span class="radiobutton"><input type="radio" name="employed" value="no"> No </span> 
 
       </form> 
 
      </td> 
 
      </tr> 
 
     </table> 
 

 
     <table id="employedHIDDEN"> 
 
      <tr> 
 
      <td> 
 
       Is your spouse/legal partner working in our institution? 
 
      </td> 
 
      </tr> 
 

 
      <tr> 
 
      <td class="left"> 
 
       <form> 
 
       <span class="radiobutton"><input type="radio" name="epworking" value="yes"> Yes </span> 
 
       <span class="radiobutton"><input type="radio" name="epworking" value="no"> No </span> 
 
       </form> 
 
      </td> 
 
      </tr> 
 
     </table> 
 

 
     <table id="numberinputHIDDEN"> 
 
      <tr> 
 
      <td> 
 
       <span>His/her personal number: <input class="personnelnumber" type="text" name="fname"> <i class="fa fa-info-circle tooltip" aria-hidden="true"><span class="tooltiptext">A 6 digit number, you can find it on an offical document.</span> 
 
       </i> 
 
       </span> 
 
       <td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    <div id="stepsHIDDEN"> 
 
     <button onclick="window.location='03Children.html'" class="nextstep">Next</button> 
 
    </div> 
 
    </div> 
 

 
</main>

https://jsfiddle.net/pLv4uams/

Answer 1

Проблема с вашим $('input[name="epworking"]') - click event. В части else вы не заключили строки с {}, и поэтому else занимал только одну строку исполнения. $("#stepsHIDDEN").hide(); выполнил бы любую ценой на этом event. Поэтому, даже когда вы это показали, более поздняя часть скрывала его. Ниже приведено исправление.

$('input[name="epworking"]').click(function() { 
    if ($(this).attr("value") == "no") { 
    $("#stepsHIDDEN").show(); 
    $("#numberinputHIDDEN").hide(); 
    } else { 
    $("#numberinputHIDDEN").show(); 
    $("#stepsHIDDEN").hide(); 
    } 
}); 

DEMO