jQuery 如果选中复选框，如何隐藏和显示项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15550637/
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 hide and show item if checkbox is checked
提问by Paradigm
I am trying to hide and show an area based on whether a checkbox is checked. I've tried some options but either the area is visible all of the time or it is hidden all of the time.
我试图根据是否选中复选框来隐藏和显示一个区域。我尝试了一些选项，但该区域要么一直可见，要么一直隐藏。
JavaScript :
JavaScript :
$(document).ready(function () {
var mgift = $('#chkbxMGift input[type=checkbox]');
MshowHide();
mgift.change(function () {
MshowHide();
});
});
function MshowHide() {
var mgift = $('#chkbxMGift input[type=checkbox]');
var shcompany = $('#shcompany');
if (mgift.checked) {
shcompany.show();
} else {
shcompany.hide();
}
}
HTML :
HTML :
<li>
<div class="info">
<asp:CheckBox ID="chkbxMGift" runat="server" Text="A matching gift will be made" ClientIDMode="Static"/>
</div>
</li>
<li id="shcompany">
<div class="info">
<label for="txtCompanyName">Company Name</label>
<asp:TextBox runat="server" ID="txtCompanyName" CssClass="narrow" />
</div>
<div class="info">
<label for="txtCompanyPhone">Company Phone Number</label>
<asp:TextBox runat="server" ID="txtCompanyPhone" CssClass="narrow" />
</div>
</li>
How can I make this work correctly?
我怎样才能使这个工作正常？
回答by iJade
Try this code
试试这个代码
$(document).ready(function () {
$('#chkbxMGift').click(function () {
var $this = $(this);
if ($this.is(':checked')) {
$('#shcompany').hide();
} else {
$('#shcompany').show();
}
});
});
Hope it solves your issue
希望它能解决你的问题
回答by Justus Romijn
Your selector is wrong.
你的选择器是错误的。
var mgift = $('#chkbxMGift input[type=checkbox]');
This means you select the childnode inputfrom parent #chkbxMGift.
这意味着您input从 parent 中选择 childnode #chkbxMGift。
I believe this is the selector you need:
我相信这是您需要的选择器：
var mgift = $('input#chkbxMGift[type=checkbox]');
And here are some improvements on your code:
以下是对您的代码的一些改进：
$(document).ready(function () {
var mgift = $('input#chkbxMGift[type=checkbox]');
var shcompany = $('#shcompany');
// check for default status (when checked, show the shcompany)
if (mgift.attr('checked') !== undefined){
shcompany.show();
} else {
shcompany.hide();
}
// then simply toggle the shcompany on every change
mgift.change(function(){
shcompany.toggle();
});
});
jQuery's toggleis really useful and added in version 1.0, so you should be able to just go with that.
jQuery 的切换非常有用，并在 1.0 版中添加，因此您应该可以使用它。
Here's a proof of concept in a jsFiddle, with only the bare minimum:
这是 jsFiddle 中的概念证明，只有最低限度：
回答by Raffael
This is stolen from thisanswer:
这是从这个答案中窃取的：
$('.wpbook_hidden').css({
'display': 'none'
});
alert($(':checkbox:checked').attr('id'))
$(':checkbox').change(function() {
var option = 'wpbook_option_' + $(this).attr('id');
if ($('.' + option).css('display') == 'none') {
$('.' + option).fadeIn();
}
else {
$('.' + option).fadeOut();
}
});
search for similar questions before you ask yours. Please give the original author the credit if this solves your problem
在问你的问题之前先搜索类似的问题。如果这解决了您的问题，请给予原作者荣誉
回答by TheC4keIsASpy
Why use JQuery when a simple CSS property change can do the trick?
当简单的 CSS 属性更改可以解决问题时，为什么要使用 JQuery？
Just change the div's class or modify it's style:
只需更改 div 的类或修改它的样式：
If you want it to take up space even when hiddenuse visibility:hidden(respectively visibility:visible)
如果您希望它即使在隐藏使用时也占用空间visibility:hidden（分别visibility:visible）
if you want it NOTto take space when hidden use css display:none(respectively display:block)
如果您希望它在隐藏时不占用空间，请使用 css display:none（分别display:block）
回答by Rice_Crisp
Have you tried changing the CSS directly? Such as
您是否尝试过直接更改 CSS？如
document.getElementById("shcompany").style.display="none";
or
或者
document.getElementById("shcompany").style.visibility="hidden";
(or "visible")
（或“可见”）
