<!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. 【Lucene3.6.2入门系列】第03节_简述Lucene中常见的搜索功能

    package com.jadyer.lucene; import java.io.File; import java.io.IOException; import java.text.SimpleD ...

  2. bzoj1670

    第一道凸包 采用Andrew算法,不论实现还是理解都非常简单 ..] of longint;     i,j,k,m,n:longint;     ans:double; procedure swap ...

  3. Oracle.ManagedDataAccess.Client注意事项

    OracleConnection m_DbConnection = new OracleConnection(connectionString); if (m_DbConnection.State = ...

  4. BZOJ_1014_[JSOI2008]_火星人prefix_(Splay+LCP_Hash+二分)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1014 给出一个字符串,有修改,插入,以及询问LCP(i,j)的操作. 分析 LCP在白书上面有 ...

  5. BZOJ_1606_ [Usaco2008_Dec]_Hay_For_Sale _购买干草_(背包)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1606 价值和重量相等的01背包问题. 分析 ... #include <bits/std ...

  6. Eclipse 中使用Genymotion 作为模拟器的步骤

    我这里是先安装的genymotion, 后安装的eclipse. 1:安装genymotion 无难度, 直接安装就行了. 2:安装eclipse 下载adt即可, 解压运行. 3:运行eclipse ...

  7. wcf 多个节点名出错

    无法加载协定为“ServiceReference1.xxxxxx”的终结点配置部分,因为找到了该协定的多个终结点配置.请按名称指示首选的终结点配置部分. 原因是config节点中多了endpoint相 ...

  8. [原]loadrunner中数据库数据参数化

    作者:liuheng123456 发表于2013-11-25 14:11:10 原文链接 阅读:228 评论:0 查看评论

  9. hdu 3549 Flow Problem (最大流)

    裸最大流,做模板用 m条边,n个点,求最大流 #include <iostream> #include <cstdio> #include <cstring> #i ...

  10. FireFox浏览器的下载和安装、借助RamDisk让你的FireFox飞起来

    想说的是,为什么我要写此博文,算是纪念我对FireFox浏览器的一个入门.最近,开始接触了它,看到了很多IT牛人极力推荐使用 “ FireFox浏览器 ”作为开发. 深得大牛指导! 下载 安装 这是, ...