<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function isopen(sobj){
var oDiv = document.getElementById("content1");

if(sobj.value=="yes"){/*这里避免一个bug。避免了没有选中的时候是不展开 */
oDiv.style.display="block";
}
else{
oDiv.style.display="none";
}
}
function lookresult(){
var radios=document.getElementsByName("no1");
var is=true;
var values=0;
for(var i=0;i<radios.length;i++){

if(radios[i].checked){
is=false;

values=parseInt(radios[i].value);

}
}
if(is){
document.getElementById("wo").innerHTML="没有选中答案，请选择答案！！！".fontcolor("red");
return;
}
if(values<=3){/*这里要注意一个开一个就要关 */
document.getElementById("res1").className="open";
document.getElementById("res2").className="close";
}
else{
document.getElementById("res1").className="close";
document.getElementById("res2").className="open";
}
}
</script>
<style type="text/css">
.open{
display:block;
}
.close{
display:none;
}

</style>
</head>
<body>
<h1>演示radio组件的用法</h1>
你参加问卷调查吗？<input type="radio" value="yes" name="same" onclick="isopen(this)"/>是&nbsp;&nbsp;&nbsp;
<input type="radio" value="no" name="same" checked="checked" onclick="isopen(this)"/>否<!--这里是先默认为不展开，默认先选择no -->
<div id="content1" >
问卷内容：<br/>
姓名：<input type="text"><br/>
邮箱：<input type="text"><br/>
</div>
<hr>
<h2>欢迎来参加性格测试</h2>
<ul><!-- 这个选择的题目可以用ul无序表来封装！ -->
<li><h6>第一题：</h6></li>
<li><a><input type="radio" value="1" name="no1" >梨子</a></li>
<li><a><input type="radio" value="2" name="no1" >苹果</a></li>
<li><a><input type="radio" value="3" name="no1" >香蕉</a></li>
<li><a><input type="radio" value="4" name="no1" >葡萄</a></li>
<li><a><input type="radio" value="5" name="no1" >桃子</a></li>
<li><a><input type="radio" value="6" name="no1" >西瓜</a></li>
<li><a><input type="radio" value="7" name="no1" >哈密瓜</a></li>
</ul>
<input type="button" value="查看检测结果" onclick="lookresult()">
<div id="res1" class="close">1~3:性格开朗，建议。。。。。。</div>
<div id="res2" class="close">4~7:性格奔放，建议。。。。。。</div>
<span id="wo"></span>
</body>
</html>

radio组件的更多相关文章

  1. element-ui button组件 radio组件源码分析整理笔记（一）

    Button组件 button.vue <template> <button class="el-button" @click="handleClick ...

  2. 微信小程序radio组件 - 如何改变默认样式大小？

    今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...

  3. 微信小程序把玩（十九）radio组件

    原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...

  4. Flutter——Radio组件、RadioListTile组件（单选按钮组件）

    Radio组件 Radio组件的常用属性: 属性 描述 value 单选的值 onChanged 改变时触发 activeColor 选中的颜色.背景颜色 groupValue 选择组的值 impor ...

  5. 【Taro全实践】修改radio组件的大小

    需求是将radio选中后颜色改为橙色.大小改成合适大小. 1.改颜色 <Radio color='#FF7464'></Radio> 2.改大小 <Radio style ...

  6. 【radio-group、radio】 单选项组件说明

    radio-group组件是包裹radio组件的容器 原型: <radio-group bindchange="[EventHandle]"> <radio .. ...

  7. Vue 单选框与单选框组 组件

    radio组件 v-model  : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...

  8. element-ui 组件源码分析整理笔记目录

    element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...

  9. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

随机推荐

  1. 关于标准库中的ptr_fun/binary_function/bind1st/bind2nd

    http://www.cnblogs.com/shootingstars/archive/2008/11/14/860042.html 以前使用bind1st以及bind2nd很少,后来发现这两个函数 ...

  2. S3C2410 实验三——块拷贝、字拷贝（寄存器的理解）

    因为笔记做在 evernote 上,博客上就不再重新敲了. http://www.evernote.com/shard/s307/sh/5bd591a1-dbbd-4457-812a-17c08c22 ...

  3. Eclipse中输入系统变量和运行参数

    在开发时,有时候可能需要根据不同的环境设置不同的系统参数,我们都知道,在使用java -jar命令时可以使用-D参数来设置运行时的系统变量,同样,在Eclipse中运行java程序时,我们怎么设置该系 ...

  4. BZOJ_1821_[JSOI2010]_部落划分_(贪心,并查集)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1821 给出n个点的坐标,将n个点划分成k个部分,使得每个部分之间最小的距离最大. 分析 每两个 ...

  5. BZOJ1324: Exca王者之剑

    1324: Exca王者之剑 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 256  Solved: 131[Submit][Status] Desc ...

  6. iOS上百度输入法引起的问题

     /*      UIKeyboardWillShowNotification 通知下的数据            百度     {         UIKeyboardAnimationCurveU ...

  7. HDU-5414 CRB and String

    http://acm.hdu.edu.cn/showproblem.php?pid=5414 题意:给定字符串s和t,可以在s里面选一个字符c,然后任选一个字符d(d!=c)将d插入到c的后面,问能不 ...

  8. 不使用CvvImage类来在MFC中显示图像

    /* * ===================================================================================== * * Filen ...

  9. Linux下简单的socket通信实例

    Linux下简单的socket通信实例 If you spend too much time thinking about a thing, you’ll never get it done. —Br ...

  10. asp.net mvc3+EF4.1项目实战

    ASP.NET身份验证机制membership入门——配置篇(1) http://www.cnblogs.com/xlb2000/archive/2010/05/10/1729076.html 1.添 ...