jQuery 如何通过单击单选按钮显示/隐藏 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17446127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show/hide DIV by clicking radio button?
提问by Umarfaruk M
By default the both DIV's should be hidden. By selecting the radio button, have to show the appropriate DIV (following its #ID).
默认情况下，两个 DIV 都应该隐藏。通过选择单选按钮，必须显示适当的 DIV（在其 #ID 之后）。
Below is my code:
下面是我的代码：
<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>
<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>
<style> .none { display:none; } </style>
But we have to show only one div at a time. Is it possible?
但是我们一次只能显示一个 div。是否可以？
回答by pala?н
You can use the data-*attribute here like:
您可以在data-*此处使用该属性，例如：
HTML
HTML
<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />
JS
JS
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
回答by uxcode
This can be done using CSS.
这可以使用 CSS 来完成。
Note: The <div>s must be general siblings of the <input>element.
注意：<div>s 必须是<input>元素的一般兄弟。
HTML:
HTML：
<form>
<input type="radio" name="showGreen"> Green
<input type="radio" name="showRed"> Red
<div id="green">I am the green div.</div>
<div id="red">I am the red div.</div>
</form>
CSS:
CSS：
#green, #red {
display: none;
padding: 10px;
}
#green {
background-color: #6f6;
}
#red {
background-color: #f44;
}
input[name="showGreen"]:checked ~ #green,
input[name="showRed"]:checked ~ #red {
display: block;
}
JSFiddle: http://jsfiddle.net/Ly56w/
JSFiddle：http: //jsfiddle.net/Ly56w/
回答by Umarfaruk M
Try this:
尝试这个：
HTML:
HTML：
<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>
<div id="bank_div" class="none choice">Bank</div>
<div id="school_div" class="none choice">School</div>
JS:
JS：
$("input[type=radio]").click(function(event) {
var myId = this.id;
var targetId = myId + "_div";
$("div.choice:not(#" + targetId + ")").addClass(".none");
$("#" + targetId).removeClass(".none");
});
回答by Alex Marinov
This is my solution using jQuery:
这是我使用 jQuery 的解决方案：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function showBank()
{
$("#bankDIV").removeClass("none");
$("#bankDIV").addClass("showDIV");
//Make sure schoolDIV is not visible
$("#schoolDIV").removeClass("showDIV");
$("#schoolDIV").addClass("none");
}
function showSchool()
{
$("#schoolDIV").removeClass("none");
$("#schoolDIV").addClass("showDIV");
//Make sure bankDIV is not visible
$("#bankDIV").removeClass("showDIV");
$("#bankDIV").addClass("none");
}
</script>
</head>
<body>
<input type="radio" name='thing' value='valuable' id="bank" onclick="showBank()"/>
<input type="radio" name='thing' value='valuable' id="school" onclick="showSchool()"/>
<div id="bankDIV" class="none">Bank</div>
<div id="schoolDIV" class="none">School</div>
<style>
.none { display:none; },
.showDIV { display:block; }
</style>
</body>
</html>
Make sure that no doubled IDs are presented in your code. And that only one DIV is visible at a time.
确保您的代码中没有出现重复的 ID。并且一次只能看到一个 DIV。
Regards, Alex
问候，亚历克斯
回答by Syed Mohammad Ibrahim Khalil
This is working for me:
这对我有用：
<div class="form-group">
<label>Please select Your Payment Option:</label><br>
<input id='watch-me1' name='payment' type='radio' class='show-me1' value="Cash On Delivery" checked /> Cash On Delivery<br />
<div id='show-me1' style='display:none;border:1px solid black;color:red;'>Not Available At This Moment!</div>
<input id='watch-me2' name='payment' type='radio' class='show-me2' value="Bkash/Rocket Mobile" /> Bank<br />
<div id='show-me2' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>
<input id='watch-me3' name='payment' type='radio' class='show-me3' value="Credit/Debit Card" /> Credit/Debit Card<br />
<div id='show-me3' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>
<input id='watch-me4' name='payment' type='radio' class='show-me4' value="Paypal" /> Paypal<br />
<div id='show-me4' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>
<script>
$(function(){
$(':radio').click(function() {
$('#' + $(this).attr('class')).fadeIn().siblings('div').hide();
})
.filter(':checked').click();
});
</script>
</div>
回答by Amani
<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>
<div id="bankDiv" class="none">Bank</div>
<div id="schoolDiv" class="none">School</div>
<style> .none { display:none; } </style>
jQuery:
jQuery：
$(function() {
$('input[type="radio"]').change(function() {
var rad = $(this);
('input[type="radio"]').addClass('none');
if (rad.is(':checked'))
('#' + rad.attr('id') + 'Div').removeClass('none');
});
});
回答by Gaurav Agrawal
First of all you it is not a better approach that you use same id for 2 or more controls...
首先，您对 2 个或更多控件使用相同的 ID 并不是更好的方法......
Please make a unique id for each element.
请为每个元素创建一个唯一的 id。
use this code...
使用此代码...
<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>
<div id="radio_divs">
<div id="bank_div" class="none">Bank</div>
<div id="school_div" class="none">School</div>
</div>
<style> .none { display:none; }
.view { display:block; }
</style>
now use onclick on radio button...
现在使用 onclick 单选按钮...
jQuery("input[type=radio]").click(function(event) {
jQuery('#radio_divs').children('div').each(function () {
jQuery(this).addClass(".none");
});
jQuery("#" + this.id + "_div").addClass(".view");
});
It will definitely works and make it visible only a single div and rest divs make it invisible....
它肯定会起作用并使其仅在单个 div 可见，其余 div 使其不可见....
回答by Pbk1303
you can try this as well,
你也可以试试这个
<input type="radio" name='thing' value='valuable' id="bank"/> <input type="radio" name='thing' value='valuable' id="school"/>
<div id="bankDiv" class="none">Bank</div> <div id="schoolDiv" class="none">School</div>
css
css
.none { display:none; }
jquery
查询
$(function() {
$('input[type="radio"]').change(function() {
var rad = $(this).attr('id');
$('#' + rad + 'Div').show();
$('#' + rad + 'Div').siblings('div').hide();
});
});
check out this fiddle : http://jsfiddle.net/Kritika/f2UKj/
看看这个小提琴：http: //jsfiddle.net/Kritika/f2UKj/
