基於多個單選按鈕切換顯示/隱藏
[英]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.