如何隐藏和显示项目，如果复选框被选中 [英] How to hide and show item if checkbox is checked

问题描述

我试图隐藏和显示基于一个复选框是否被选中的区域。我已经尝试了一些选项，但无论是区域可见所有的时间和它隐藏所有的时间。

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的：

$(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>    

我怎样才能正确地使这项工作？

How can I make this work correctly?

推荐答案

试试这个code

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

希望能解决您的问题。

Hope it solves your issue

这篇关于如何隐藏和显示项目，如果复选框被选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！