根据选定的单选按钮隐藏展 [英] Hide show based on selected Radio Button

问题描述

我与一些JS，因为我一直在做一个试验形式。这样做的目的是，如果他们用户未选择是隐藏。这里是我的一些东西停留在：
HTML：

 ＆LT; ASP：RadioButtonList的=服务器ID =rbMatchingGift的ClientIDMode =静态＆GT;
    ＆所述; asp的：列表项值=0的文本=否＆GT;＆下; / ASP：列表项＆GT;
    ＆LT; ASP：ListItem的值=1文本=是＆GT;＆LT; / ASP：ListItem的＆GT;
＆LT; / ASP：RadioButtonList的＆GT;
＆LT;李ID =shcompany＆GT;
    ＆LT;标签=txtCompanyName＆GT;公司名称＆LT; /标签＆gt;
    ＆LT; ASP：文本框=服务器ID =txtCompanyName的CssClass =窄/＆GT;
    ＆LT;标签=txtCompanyPhone＆GT;公司电话号码＆LT; /标签＆gt;
    ＆LT; ASP：文本框=服务器ID =txtCompanyPhone的CssClass =窄/＆GT;
＆LT; /李＆GT;
 

JS：

  $（文件）。就绪（函数（）{
    VAR shcompany = $（'＃shcompany'）;
    显示隐藏（）;
    mgift.change（函数（）{
        显示隐藏（）;
    }）;    功能显示隐藏（）{
        VAR mgift = $（'＃rbMatchingGift'）;
        VAR shcompany = $（'＃shcompany'）;        如果（mgift.val（）==1）{
            shcompany.show（）;
        }其他{
            shcompany.hide（）;
        }
    }
}）;
 

解决方案

 ＆LT; ASP：RadioButtonList的=服务器ID =rbMatchingGift的ClientIDMode =静态＆GT;
    ＆所述; asp的：列表项值=0的文本=否＆GT;＆下; / ASP：列表项＆GT;
    ＆LT; ASP：ListItem的值=1文本=是＆GT;＆LT; / ASP：ListItem的＆GT;
＆LT; / ASP：RadioButtonList的＆GT;
＆LT;李ID =shcompany＆GT;
    ＆LT;标签=txtCompanyName＆GT;公司名称＆LT; /标签＆gt;
    ＆LT; ASP：文本框=服务器ID =txtCompanyName的CssClass =窄/＆GT;
    ＆LT;标签=txtCompanyPhone＆GT;公司电话号码＆LT; /标签＆gt;
    ＆LT; ASP：文本框=服务器ID =txtCompanyPhone的CssClass =窄/＆GT;
＆LT; /李＆GT;
＆LT;脚本＆GT;    $（文件）。就绪（函数（）{
        显示隐藏（）;
        $（'＃rbMatchingGift输入'）。改变（函数（）{
            显示隐藏（）;
        }）;        功能显示隐藏（）{
            VAR mgift = $（'＃rbMatchingGift输入：检查'）;
            VAR shcompany = $（'＃shcompany'）;            如果（mgift.val（）==1）{
                shcompany.show（）;
            }其他{
                shcompany.hide（）;
            }
        }
    }）;
＆LT; / SCRIPT＆GT;
 

I was experimenting with some JS for a form I have been working on. The aim is to hide if they user has not selected yes. Here is where I am some what stuck at: HTML:

<asp:RadioButtonList runat="server" ID="rbMatchingGift" ClientIDMode="Static">
    <asp:ListItem Value="0" Text="No"></asp:ListItem>
    <asp:ListItem Value="1" Text="Yes"></asp:ListItem>
</asp:RadioButtonList>
<li id="shcompany">                 
    <label for="txtCompanyName">Company Name</label>
    <asp:TextBox runat="server" ID="txtCompanyName" CssClass="narrow" />   
    <label for="txtCompanyPhone">Company Phone Number</label>
    <asp:TextBox runat="server" ID="txtCompanyPhone" CssClass="narrow" />       
</li> 

JS:

$(document).ready(function () { 
    var shcompany = $('#shcompany'); 
    showHide();
    mgift.change(function () {
        showHide();
    });

    function showHide() {
        var mgift = $('#rbMatchingGift');
        var shcompany = $('#shcompany');

        if (mgift.val() == "1") {
            shcompany.show();
        } else {       
            shcompany.hide();        
        }
    }
});

解决方案

<asp:RadioButtonList runat="server" ID="rbMatchingGift" ClientIDMode="Static">
    <asp:ListItem Value="0" Text="No"></asp:ListItem>
    <asp:ListItem Value="1" Text="Yes"></asp:ListItem>
</asp:RadioButtonList>
<li id="shcompany">
    <label for="txtCompanyName">Company Name</label>
    <asp:TextBox runat="server" ID="txtCompanyName" CssClass="narrow" />
    <label for="txtCompanyPhone">Company Phone Number</label>
    <asp:TextBox runat="server" ID="txtCompanyPhone" CssClass="narrow" />
</li>
<script>

    $(document).ready(function () {
        showHide();
        $('#rbMatchingGift input').change(function () {
            showHide();
        });

        function showHide() {
            var mgift = $('#rbMatchingGift input:checked');
            var shcompany = $('#shcompany');

            if (mgift.val() == "1") {
                shcompany.show();
            } else {
                shcompany.hide();
            }
        }
    });
</script>

这篇关于根据选定的单选按钮隐藏展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！