[英]How to hide and show item if checkbox is checked
我试图隐藏并根据是否选中复选框显示区域。 我尝试过一些选项,但是这个区域一直都是可见的,或者它一直都是隐藏的。
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:
<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>
我怎样才能正常工作?
试试这个代码
$(document).ready(function () {
$('#chkbxMGift').click(function () {
var $this = $(this);
if ($this.is(':checked')) {
$('#shcompany').hide();
} else {
$('#shcompany').show();
}
});
});
希望它能解决你的问题
你的选择器错了。
var mgift = $('#chkbxMGift input[type=checkbox]');
这意味着您从父级#chkbxMGift
选择子节点input
。
我相信这是你需要的选择器:
var mgift = $('input#chkbxMGift[type=checkbox]');
以下是对您的代码的一些改进:
$(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的切换非常有用,并且在1.0版本中添加,因此您应该能够使用它。
这是jsFiddle中的概念证明,只有最低限度:
这是从这个答案中偷来的:
$('.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();
}
});
在你问问之前先搜索类似的问题。 如果这可以解决您的问题,请给原作者一个信用
您是否尝试过直接更改CSS? 如
document.getElementById("shcompany").style.display="none";
要么
document.getElementById("shcompany").style.visibility="hidden";
(或“可见”)
为什么在简单的CSS属性更改时可以使用JQuery?
只需更改div的类或修改它的样式:
如果您希望它占用空间,即使隐藏时使用visibility:hidden
(分别是visibility:visible
)
如果你想隐藏时不要占用空间使用css display:none
(分别display:block
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.