<!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. gif录制工具

    gif录制工具 This tool allows you to record a selected area of your screen and save it as a Gif. http://s ...

  2. proc 文件系统调节参数介绍

    /proc/net/* snmp文件 Ip: ip项 Forwarding        : 是否开启ip_forward,1开启,2关闭 DefaultTTL       : IP默认ttl. In ...

  3. hdu4666Hyperspace

    http://acm.hdu.edu.cn/showproblem.php?pid=4666 先看一个求曼哈顿的帖子http://www.cnblogs.com/lmnx/articles/24797 ...

  4. bzoj1823

    第一道2sat, 其实2sat问题不难,只要记住一个:通过“推导出”连边 什么意思呢?就是一般题目中的变量都有两个状态,只能取一个,我们定义为true和false 对于每一个变量i,我们都拆成两个点, ...

  5. apache开源项目--JMeter

    JMeter是Apache组织的开放源代码项目,它是功能和性能测试的工具,100%的用java实现.

  6. servlet读取cookie问题

    String sessionid = request.getSession().getId(); // 取得当前的session id ckSessionid = new Cookie("s ...

  7. c# 模拟http post 带cookie

    下面的代码是自动向cnblogs中的小组发帖.........注意小组ID,主题ID,小组类型 首先采用firebug分析到发帖时的post地址以及参数,其中在headers中包含了cookies,把 ...

  8. 一例胜千言，详谈SQL Sever数据库锁

    1 前言 数据库大并发操作要考虑死锁和锁的性能问题.看到网上大多语焉不详(尤其更新锁),所以这里做个简明解释,为下面描述方便,这里用T1代表一个数据库执行请求,T2代表另一个请求,也可以理解为T1为一 ...

  9. [Tommas] Web测试中，各类web控件测试点总结

    一 .界面检查 进入一个页面测试,首先是检查title,页面排版,字段等,而不是马上进入文本框校验 1.页面名称title是否正确 2.当前位置是否可见  您的位置:xxx>xxxx 3.文字格 ...

  10. Ruby应用记录：修改文件中某个字符串

    #修改android客户端中服务器地址的默认值为对应环境的服务器地址 #!/usr/bin/ruby ostr="192.168.88.95:8088" nstr="19 ...