通过点击单选按钮实现某个模块的显示和隐藏
最近在项目中有个需求,应用在文章发布里面,要求新增发布文章的时候,发布方式二选一,要么是以一个URL来发布文章内容,要么自己编辑文章内容。
当我选择URL发布时会弹出相应编辑框:
当我选择编辑发布时会显示随影内容编辑框:
接下来看代码的实现:
首先是HTML
<ul class="set1">
<li><strong class="orange fontsize20">*</strong>请选择文章发布方式</li>
<li><span class="webnamesec sizese">
<input type="radio" name="identity" value="URL发布" onclick="radioClick()"/>URL发布
<input type="radio" name="identity" value="编辑发布" onclick="radioClick()"/>编辑发布
</span></li>
</ul>
- 上面的代码中的input框保证name属性的值是一样的
<ul class="set1" id="casea" style="display:none">
<li>外部URL</li>
<li><span class="webname">
<input name="url" type="text" id="url" value="$!obj.url" size="40" />
</span><span id="nothis"><strong class="q"></strong><strong class="w">填写URL后,该文章链接会直接跳转到对应的URL,URL以http://开头</strong><strong class="c"></strong></span></li>
</ul>
<ul class="set1" id="contentinpt" style="display:none">
<li><strong class="orange fontsize20"></strong>内容</li>
<li>
<span class="webname">
<textarea name="content" cols="40" id="content">$!obj.content</textarea>
</span>
</li>
</ul>
- 将两个ul或者div什么的设置为默认隐藏style=”display:none”,定义两个不同的ID:例如id=”casea”和id=”contentinpt”
JS代码:
<script>
function radioClick() {
//定义一个变量show,show获取的是被选中的radio对应的值
var show="";
//取到所有的单选
var apm = document.getElementsByName("identity");
//遍历
for(var i=0;i < apm.length;i++){
//取到所选中的值checked
if(apm[i].checked)
show = apm[i].value;
}
//接下来就是对取到的值,进行显示和隐藏操作。
switch (show){
case 'URL发布':
document.getElementById("casea").style.display="block";
document.getElementById("contentinpt").style.display="none";
break;
case '编辑发布':
document.getElementById("casea").style.display="none";
document.getElementById("contentinpt").style.display="block";
break;
default:
document.getElementById("casea").style.display="none";
document.getElementById("contentinpt").style.display="none";
break;
}
}
</script>
肯定还有更好,更简洁的方式,不喜勿喷,又看到的大牛,希望多多指导交流。