<!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. 引用计数（retainCount）

    ClassA.h: #import <Foundation/Foundation.h> @interface ClassA:NSObject { NSString *name; } -(v ...

  2. php Magic methods __call

    <?php class Car{ protected $_color; protected $_model; public function __call($name,$arguments){ ...

  3. 安装gem invalid date format in specification错误的解决方法

    别的不说,报错信息直接贴图: 解决方法: 1.找到你环境目录下的spec,例如:D:\Ruby187\lib\ruby\gems\1.8\specifications. 2.找到引起错误文件的gems ...

  4. 存储过程中“Select Top 变量”的问题如何解决

    在SqlServer2005中,可以这样: DECLARE @p int SELECT TOP (@p) * FROM 表名 在SqlServer2000中,不支持以上方法,可以这样: DECLARE ...

  5. Nagios Core/Icinga 基于栈的缓冲区溢出漏洞

    漏洞名称: Nagios Core/Icinga 基于栈的缓冲区溢出漏洞 CNNVD编号: CNNVD-201402-484 发布时间: 2014-03-03 更新时间: 2014-03-03 危害等 ...

  6. Linux Kernel ‘exitcode_proc_write()’函数本地缓冲区溢出漏洞

    漏洞名称: Linux Kernel ‘exitcode_proc_write()’函数本地缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-061 发布时间: 2013-11-07 更新时 ...

  7. PHP数组排列

    一.先看最简单的情况.有两个数组: $arr1 = array(1,9,5);$arr2 = array(6,2,4); array_multisort($arr1,$arr2); print_r($ ...

  8. DNS----域名解析系统

    DNS就是域名解析系统,它可以将IP转换成域名,也可以将域名转换成IP 1. 安装DNS服务       开始—〉设置—〉控制面板—〉添加/删除程序—〉添加/删除Windows组件—〉“网络服务”—〉 ...

  9. ifconfig命令

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...

  10. spring--AOP2--6

    AOP 之 6.6 通知参数 前边章节已经介绍了声明通知,但如果想获取被被通知方法参数并传递给通知方法,该如何实现呢?接下来我们将介绍两种获取通知参数的方式. 使用JoinPoint获取:Spring ...