如何通过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>
题主要的代码如下
<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>
首先，为待显示的元素设置display:none 或者 visibility隐藏属性，然后，使用document.getElementByid()等其他获取元素的方法，通过获取某元素的值，判断是否显示哪一个属性，改变其隐藏属性。
为您查找到https://blog.csdn.net/Liuxiaoyang1999/article/details/102767061
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！