如果选中复选框，如何隐藏和显示项目答案

【问题标题】：How to hide and show item if checkbox is checked如果选中复选框，如何隐藏和显示项目
【发布时间】：2013-03-11 03:30:57
【问题描述】：

我正在尝试根据是否选中复选框来隐藏和显示一个区域。我尝试了一些选项，但要么该区域始终可见，要么始终隐藏。

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>

我怎样才能使它正常工作？

【问题讨论】：

你的 html 不完整吗？看不到复选框？
你需要取消这个函数调用 MshowHide();也许
@AshReva li 正下方的复选框
Hide show based on selected Radio Button 的可能重复项
@CBroe 好吧，我现在正在使用一个复选框，但它似乎不起作用

标签： javascript jquery asp.net html

【解决方案1】：

试试这个代码

     $(document).ready(function () {
     $('#chkbxMGift').click(function () {
         var $this = $(this);
         if ($this.is(':checked')) {
             $('#shcompany').hide();
         } else {
             $('#shcompany').show();
         }
     });
 });

希望它能解决你的问题

【讨论】：

但是你不检查初始状态。
我刚刚修改了问题中的代码以使隐藏和显示工作:)
如果你想删除它的罚款。我的意思是它服务于目的，只是我写 $(this) 的方式

【解决方案2】：

您的选择器错误。

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 的toggle 非常有用，并在 1.0 版中添加，所以您应该可以使用它。

这是一个 jsFiddle 中的概念证明，只有最低限度：

http://jsfiddle.net/Y39Bu/1/

【讨论】：

【解决方案3】：

这是从this偷来的答案：

http://jsfiddle.net/MH8e4/4/

$('.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();
    }
});

请先搜索类似的问题，然后再提出您的问题。如果这解决了您的问题，请给原作者署名

【讨论】：

【解决方案4】：

您是否尝试过直接更改 CSS？比如

document.getElementById("shcompany").style.display="none";

或

document.getElementById("shcompany").style.visibility="hidden";

（或“可见”）

【讨论】：

这就是我最初使用单选按钮列表执行该功能时所做的，然后我将其更新为显示隐藏功能和一个复选框

【解决方案5】：

当一个简单的 CSS 属性更改可以解决问题时，为什么要使用 JQuery？

只需更改 div 的类或修改其样式：

如果您希望它即使隐藏也能占用空间，请使用visibility:hidden（分别为visibility:visible）

如果您希望它不在隐藏时占用空间，请使用 css display:none（分别为 display:block）

【讨论】：