点击单选按钮改变div显示隐藏

最新推荐文章于 2022-10-14 14:34:31 发布

转载最新推荐文章于 2022-10-14 14:34:31 发布 · 2.4k 阅读

本文介绍了一个使用jQuery实现的功能：通过选择不同的单选按钮来控制页面上两个不同DIV元素的显示与隐藏状态。具体而言，当选择noperid时显示ID为noperid_div的DIV并隐藏另一个；选择calender则同时隐藏两者；选择variable时显示ID为variable_div的DIV并隐藏另一个。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击单选按钮改变div显示隐藏

JQuery:

function showCont() {
switch ($("input[name=selector]:checked").attr("id")) {
case "noperid":
$("#noperid_div").show();
$("#variable_div").hide();
break;
case "calender":
$("#noperid_div").hide();
$("#variable_div").hide();
break;
case "variable":
$("#noperid_div").hide();
$("#variable_div").show();
break;
default:
break;
}
}

HTML:

<input type="radio" name="selector" id="noperid" value="noperid" /> noperid<br />
<div id="noperid_div" style="display: none;">
<label>start_time</label> <input type="text" id="start_time_noperid" /><br />
</div>
<input type="radio" name="selector" id="calender" value="calender" /> calender<br />
<input type="radio" name="selector" id="variable" value="variable" /> variable<br />
<div id="variable_div" style="display: none;">
<label>start_time</label> <input type="text" id="start_time_variable" /><br />
<label>end_time</label> <input type="text" id="end_time_variable" /><br />
</div>