如何通过js实现逻辑表单

Question

如何通过js实现逻辑表单 需要判断input选中项 显示相应内容
点击#step1-next之后，判断input[name='equipment']，只有当value="laptop"时，才显示div#step2-laptop

<div class="slidebox" id="step1">     
  <form id="option1">
  <input type="radio" name="equipment" id="" class="optioninput" value="laptop">
  <input type="radio" name="equipment" id="" class="optioninput" value="monitor">
  <input type="radio" name="equipment" id="" class="optioninput" value="laptopmonitor">
  <input type="radio" name="equipment" id="" class="optioninput" value="monitormonitor">

  <input type="submit" id="step1-next" value="NEXT" onclick="step1()">

  </form>
</div>

<div class="slidebox" id="step2-laptop">
  <form id="option2">
     <input type="radio" name="lightyon" id="" class="optioninput">
     <input type="radio" name="lightyon" id="" class="optioninput">
     <input type="radio" name="lightyon" id="" class="optioninput">
  </form>
</div>

<script>
function step1(){ 
 var step1option = $("input[name='equipment']:checked").val();
 if(step1option == "laptop"){...}
}
</script>
  

Answer 1

题主要的代码如下

<div class="slidebox" id="step1">
    <form id="option1">
        <input type="radio" name="equipment" id="" class="optioninput" value="laptop">
        <input type="radio" name="equipment" id="" class="optioninput" value="monitor">
        <input type="radio" name="equipment" id="" class="optioninput" value="laptopmonitor">
        <input type="radio" name="equipment" id="" class="optioninput" value="monitormonitor">

        <input type="submit" id="step1-next" value="NEXT" onclick="return step1()"><!--注意这里return 返回step1的返回值false阻止表单提交-->

    </form>
</div>

<div class="slidebox" id="step2-laptop" style="display:none"><!--默认隐藏-->
    <form id="option2">
        <input type="radio" name="lightyon" id="" class="optioninput">
        <input type="radio" name="lightyon" id="" class="optioninput">
        <input type="radio" name="lightyon" id="" class="optioninput">
    </form>
</div>

<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    function step1() {
        var step1option = $("input[name='equipment']:checked").val();

        $('#step2-laptop')[step1option == "laptop" ? 'show' : 'hide']();

        return false;//重点，阻止表单提交。要不提交后会刷新页面导致上面的代码不执行
    }
</script>