用RadioButten或CheckBox實(shí)現(xiàn)div的顯示與隱藏
更新時(shí)間：2013年09月21日 13:01:15 作者：
用RadioButten（或CheckBox）實(shí)現(xiàn)div的顯示與隱藏，當(dāng)選擇“女”時(shí)，顯示“美女、才女”；當(dāng)選擇“男”時(shí)隱藏，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
當(dāng)選擇“女”時(shí)，顯示“美女、才女”；當(dāng)選擇“男”時(shí)，隱藏 aspx 頁面內(nèi)容：
<head runat="server">
<title>用RadioButten（或CheckBox）實(shí)現(xiàn)div的顯示與隱藏</title>
<script type="text/javascript" language="javascript">
function show2() {
if (document.getElementById("Radio2").checked) {
document.getElementById("nvInfo").style.display = "block";
}
else {
document.getElementById("nvInfo").style.display = "none";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Radio1" type="radio" runat="server" name="11" onclick="show2()" value="11" />男
<input id="Radio2" type="radio" runat="server" name="11" onclick="show2()" value="22" />女
<%-- <input id="Radio2" type="checkbox" runat="server" name="11" onclick="show2()" value="22" />女--%>
</div>
<div id="nvInfo" runat="server" style="display: none;">
<input id="Radio5" type="radio" runat="server" name="2" onclick="show1" value="11" />美女
<input id="Radio6" type="radio" runat="server" name="2" onclick="show2" value="22" />才女
</div>
</form>
</body>
cs頁面代碼：
protected void Page_Load(object sender, EventArgs e)
{
this.Radio2.Checked = true;
if (this.Radio2.Checked)
this.nvInfo.Attributes.CssStyle.Add("display", "block"); //從.cs給.aspx中的HTML控件添加CSS樣式屬性
if (this.Radio1.Checked)
this.nvInfo.Attributes.CssStyle.Add("display", "none"); //從.cs給.aspx中的HTML控件添加CSS樣式屬性
}
復(fù)制代碼 代碼如下:
<head runat="server">
<title>用RadioButten（或CheckBox）實(shí)現(xiàn)div的顯示與隱藏</title>
<script type="text/javascript" language="javascript">
function show2() {
if (document.getElementById("Radio2").checked) {
document.getElementById("nvInfo").style.display = "block";
}
else {
document.getElementById("nvInfo").style.display = "none";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Radio1" type="radio" runat="server" name="11" onclick="show2()" value="11" />男
<input id="Radio2" type="radio" runat="server" name="11" onclick="show2()" value="22" />女
<%-- <input id="Radio2" type="checkbox" runat="server" name="11" onclick="show2()" value="22" />女--%>
</div>
<div id="nvInfo" runat="server" style="display: none;">
<input id="Radio5" type="radio" runat="server" name="2" onclick="show1" value="11" />美女
<input id="Radio6" type="radio" runat="server" name="2" onclick="show2" value="22" />才女
</div>
</form>
</body>
cs頁面代碼：
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
this.Radio2.Checked = true;
if (this.Radio2.Checked)
this.nvInfo.Attributes.CssStyle.Add("display", "block"); //從.cs給.aspx中的HTML控件添加CSS樣式屬性
if (this.Radio1.Checked)
this.nvInfo.Attributes.CssStyle.Add("display", "none"); //從.cs給.aspx中的HTML控件添加CSS樣式屬性
}
相關(guān)文章
在開發(fā)過程中會(huì)經(jīng)常遇到window.open打開的頁面，同時(shí)問題出現(xiàn)了如何刷新上層頁面呢？本文將詳細(xì)介紹，需要了解的朋友可以參考下2012-12-12
JavaScript實(shí)現(xiàn)將數(shù)組中所有元素連接成一個(gè)字符串的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)將數(shù)組中所有元素連接成一個(gè)字符串的方法,涉及javascript中采用join方法進(jìn)行數(shù)組轉(zhuǎn)化的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
IE下window.onresize 多次調(diào)用與死循環(huán)bug處理方法介紹
IE下window.onresize多次調(diào)用與死循環(huán)bug處理方法介紹。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
javascript實(shí)現(xiàn)焦點(diǎn)滾動(dòng)圖效果 具體方法
以下JS代碼實(shí)現(xiàn)了焦點(diǎn)滾動(dòng)圖的效果方法，有需要的朋友可以參考一下2013-06-06
FireBug 調(diào)試JS入門教程 如何調(diào)試JS
這篇文章主要為大家介紹下通過firefox的FireBug調(diào)試JS，需要的朋友可以參考下2013-12-12
設(shè)置與獲取樣式屬性是UI控件與特效庫非常關(guān)鍵的部分，設(shè)置樣式我們基本可以用cssText來包打天下，但獲取樣式就不是這回事了。2010-01-01
這篇文章主要介紹了JS如何獲取Promise對象里面的值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)功能(uniapp做微信小程序)
uniapp開發(fā)小程序,先授權(quán)用戶信息后再出現(xiàn)手機(jī)號(hào)授權(quán)的頁面進(jìn)行手機(jī)號(hào)授權(quán),完成后返回上一頁面并把信息存入后臺(tái)以及前臺(tái)緩存中,方便使用,這篇文章主要介紹了UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)（uniapp做微信小程序）,需要的朋友可以參考下2024-08-08
easyui combobox開啟搜索自動(dòng)完成功能的實(shí)例代碼
下面小編就為大家?guī)硪黄猠asyui combobox開啟搜索自動(dòng)完成功能的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要給大家介紹了關(guān)于javascript類數(shù)組的深入理解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03