加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

MVC页面ajax+js实现radio

发布时间:2020-12-16 01:46:50 所属栏目:百科 来源:网络整理
导读:页面有3个radio单选按钮,点击不同的radio显示相应的内容,同时隐藏别的radio下的内容。 script type="text/javascript" $(document).ready(function () { InitalShow(); //页面一加载就根据选择的radio显示或隐藏相应内容 $("[name='ReportType']").change(

页面有3个radio单选按钮,点击不同的radio显示相应的内容,同时隐藏别的radio下的内容。

<script type="text/javascript">
$(document).ready(function () {
InitalShow(); //页面一加载就根据选择的radio显示或隐藏相应内容
$("[name='ReportType']").change(function () {
InitalShow(); //radio值改变就显示或隐藏相应内容
})
})


function InitalShow() {
var nValue = $('input[name=ReportType]:checked').val()
if (nValue == 1) {
$("p.report1").show();
$("p.report2").hide();
$("p.report3").hide();
}
if (nValue == 2) {
$("p.report1").hide();
$("p.report2").show();
$("p.report3").hide();
}
if (nValue == 3) {
$("p.report1").hide();
$("p.report2").hide();
$("p.report3").show();
}
}
</script>


页面标签如下:

<span><input type="radio" name="ReportType" value="1" checked="checked"/>weekly report</span>
<br>
<p class="report1">

...

</p>


<span><input type="radio" name="ReportType" value="2"/>monthly report</span>
<br>
<p class="report2">

...

</p>


<span><input type="radio" name="ReportType" value="3"/>annual report</span>
<br>
<p class="report3">

...

</p>

??

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读