基于多个单选按钮切换显示/隐藏
[英]Toggle show/hide based on multiple radio buttons
问题描述
选择多个单选按钮时，我正在显示特定的div。 当我只有1个条件（无线电值等于X）时，我可以使其工作，但是我需要它使“如果radio1等于X AND radio2等于A）
我已经尝试了多种方法，但是这似乎是最有潜力的一种，因为我不需要隐藏所有其他可能性，就像我尝试过的其他脚本一样。
<script type="javascript">
$(function() {
/* Code that works for 1 condition (show div named 1A with FirstSelector value is 1) */
$('input[name=FirstSelector]').change(function() {
$("div[name=1]").toggle(this.value === "1")
}).filter(":checked").change()
$('input[name=FirstSelector]').change(function() {
$("div[name=2]").toggle(this.value === "2")
}).filter(":checked").change()
/* Code for multiple IFs that is not working */
$('input[name=FirstSelector]').change(function() {
$("div[name=1A]").toggle(this.value === "1" && 'input[name=SecondSelector]'.value === "A" )
}).filter(":checked").change()
})
</script>
<html>
<p>
First choice
</p>
<input type="radio" name="FirstSelector" value="1">Option 1
<input type="radio" name="FirstSelector" value="2">Option 2
<p>
Second choice
</p>
<input type="radio" name="SecondSelector" value="A">Option A
<input type="radio" name="SecondSelector" value="B">Option B
<div name="1" class="hide">
This is the result of just Option 1
</div>
<div name="2" class="hide">
This is the result of just Option 2
</div>
<div name="1A" class="hide">
This is the result of 1 and A
</div>
<div name="1B" class="hide">
This is the result of 1 and B
</div>
<div name="2A" class="hide">
This is the result of 2 and A
</div>
<div name="2B" class="hide">
This is the result of 2 and B
</div>
</html>
http://jsfiddle.net/antonio1475/df7ra8eu/
谢谢
4 个解决方案
解决方案1
1 已采纳 2018-12-29 21:48:13
代码有几个问题。 简化事情的第一步是对每个更改使用相同的逻辑：
$('input').change(() => { const first = $('input[name=FirstSelector]:checked').val(); const second = $('input[name=SecondSelector]:checked').val(); $("div[name=1]").toggle(first === "1"); $("div[name=2]").toggle(first === "2"); $("div[name=1A]").toggle(first === "1" && second === "A"); $("div[name=1B]").toggle(first === "1" && second === "B"); $("div[name=2A]").toggle(first === "2" && second === "A"); $("div[name=2B]").toggle(first === "2" && second === "B"); });
.hide { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> First choice </p> <input type="radio" name="FirstSelector" value="1">Option 1 <input type="radio" name="FirstSelector" value="2">Option 2 <p> Second choice </p> <input type="radio" name="SecondSelector" value="A">Option A <input type="radio" name="SecondSelector" value="B">Option B <div name="1" class="hide"> This is the result of just Option 1 </div> <div name="2" class="hide"> This is the result of just Option 2 </div> <div name="1A" class="hide"> This is the result of 1 and A </div> <div name="1B" class="hide"> This is the result of 1 and B </div> <div name="2A" class="hide"> This is the result of 2 and A </div> <div name="2B" class="hide"> This is the result of 2 and B </div>
解决方案2
1 2018-12-29 22:21:50
无论如何，这是最简单的解决方案：
$(function() { var Msg = {}; Msg['1-'] = 'This is the result of just Option 1' Msg['2-'] = 'This is the result of just Option 2' Msg['-A'] = 'This is the result of just Option A' Msg['-B'] = 'This is the result of just Option B' Msg['1A'] = 'This is the result of Options 1 and A' Msg['1B'] = 'This is the result of Options 1 and B' Msg['2A'] = 'This is the result of Options 2 and A' Msg['2B'] = 'This is the result of Options 2 and B' $('input[name=FirstSelector]').change( CalcMsg ); $('input[name=SecondSelector]').change( CalcMsg ); function CalcMsg() { var Ref = $('input[name=FirstSelector]:checked').val() || '-'; Ref += $('input[name=SecondSelector]:checked').val() || '-'; $('#Msg').text( Msg[Ref] ).removeClass( "hide" ); } })
.hide {display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p> First choice </p> <label><input type="radio" name="FirstSelector" value="1">Option 1</label> <label><input type="radio" name="FirstSelector" value="2">Option 2</label> <p> Second choice </p> <label><input type="radio" name="SecondSelector" value="A">Option A</label> <label><input type="radio" name="SecondSelector" value="B">Option B</label> <div id="Msg" class="hide"> This is the result of ... </div>
解决方案3
0 2018-12-29 21:43:24
您的代码有很多问题，但是要解决DIV的简单问题（不显示此问题），请使用jquery从单选组获取价值
这条线...
$("div[name=1A]").toggle(this.value === "1" && $('input[name=SecondSelector]').val() === "A" )
您在input[name=SecondSelector]周围缺少jQuery选择器$('') 。 另外，由于它是一个无线电组，因此您在尝试调用val()函数时尝试获取该value 。
这是决赛
$('input[name=FirstSelector]').change(function() {
console.log($('input[name=SecondSelector]').val());
$("div[name=1A]").toggle(this.value === "1" && $('input[name=SecondSelector]').val() === "A" )
}).filter(":checked").change()
解决方案4
0 2018-12-29 21:44:07
这是我对Java脚本代码进行的更改。
$('input[name=FirstSelector]').change(function() {
var radioValue = $("input[name='SecondSelector']:checked").val();
$("div[name=1A]").toggle(this.value === "1" && radioValue && radioValue === "A" )
}).filter(":checked").change()
更新小提琴： http : //jsfiddle.net/145tbqx0/
根据选择的数据隐藏/显示DIV，其中data-toggle =“ buttons”输入单选按钮引导程序3
[英]Show/hide DIV based on selected with data-toggle=“buttons” input radio button bootstrap 3
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.