1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. body {
  8.     margin: 0;
  9.     padding: 0;
  10.     font-family: '微软雅黑';
  11. }
  12. form {
  13.     border: 1px solid #eee;
  14.     border-radius: 10px;
  15.     width: 600px;
  16.     margin: 50px auto;
  17.     padding: 20px;
  18.     line-height: 28px;
  19.     position: relative;
  20. }
  21. form label {
  22.     display: block;
  23.     font-weight: bold;
  24.     padding: 10px 0;
  25. }
  26. form input {
  27.     margin-left: -3px;
  28.     margin-right: 5px;
  29. }
  30. #showbox1, #showbox2 {
  31.     border: 1px solid #eee;
  32.     width: 160px;
  33.     position: absolute;
  34.     right: 30px;
  35.     top: 30px;
  36.     background: #DEFEF3;
  37.     padding: 20px;
  38.     display: none;
  39. }
  40. input[type="reset"]{
  41.     float: right;
  42. }
  43. </style>
  44. <script type="text/javascript">
  45. window.onload = function ()
  46. {
  47.     var oform1 = document.getElementById('form1'),
  48.         oform2 = document.getElementById('form2');
  49.         oshowbox1 = document.getElementById('showbox1');
  50.         oshowbox2 = document.getElementById('showbox2');
  51.  
  52.     function getchecked(form,name)
  53.     {
  54.         arr = [];
  55.         for(var i = 0; i < form[name].length; i++ )
  56.         {
  57.             if(form[name][i].checked == true)
  58.             {
  59.                 arr.push(form[name][i].value)
  60.             }
  61.         }
  62.         if(form[name][0].type == 'radio')
  63.         {
  64.             return arr[0];
  65.         }
  66.         if(form[name][0].type == 'checkbox')
  67.         {
  68.             return arr;
  69.         }
  70.     };
  71.  
  72.     for(var i = 0; i < oform1.income.length; i++ )
  73.     {
  74.         oform1.income[i].onclick = function ()
  75.         {
  76.             showbox1.style.display = 'block';
  77.             showbox1.innerHTML = '您现在得收入是：' + getchecked(oform1,'income');
  78.         }
  79.     }
  80.  
  81.     for(var i = 0; i < oform2.character.length; i++ )
  82.     {
  83.         oform2.character[i].onclick =function ()
  84.         {
  85.             showbox2.style.display = 'block';
  86.             showbox2.innerHTML = '您现在得收入是：' + getchecked(oform2,'character').join(' ');
  87.         }
  88.     }
  89.     oform1.onreset = function ()
  90.     {
  91.         var re = confirm ('你确定要重置吗？');
  92.         if(re)
  93.         {
  94.             showbox1.style.display = 'none';
  95.             return true;
  96.         }
  97.         else
  98.         {
  99.             return false;
  100.         }
  101.     }
  102.  
  103.     oform2.onreset = function ()
  104.     {
  105.         var re = confirm('你确定要重置吗？');
  106.         if(re)
  107.         {
  108.             showbox2.style.display = 'none';
  109.             return true;
  110.         }
  111.         else
  112.         {
  113.             return false;
  114.         }
  115.     }    
  116.  
  117. }
  118. </script>
  119. </head>
  120.  
  121. <body>
  122.     <form id="form1">
  123.         <label>您的月收入水平是：</label>
  124.         <input type="radio" name="income" value="1000元以下">1000元以下<br/>
  125.         <input type="radio" name="income" value="1000~3000元">1000~3000元<br/>
  126.         <input type="radio" name="income" value="3000~5000元">3000~5000元<br/>
  127.         <input type="radio" name="income" value="5000~10000元">5000~10000元<br/>
  128.         <input type="radio" name="income" value="10000~20000元">10000~20000元<br/>
  129.         <input type="radio" name="income" value="20000元以上">20000元以上
  130.         <div id="showbox1"></div>
  131.         <input type="reset" name="reset" value="重置">
  132.     </form>
  133.     <form id="form2">
  134.         <label>您的性格是：</label>
  135.         <input type="checkbox" name="character" value="开朗">开朗
  136.         <br>
  137.         <input type="checkbox" name="character" value="随性">随性
  138.         <br>
  139.         <input type="checkbox" name="character" value="阴郁">阴郁
  140.         <br>
  141.         <input type="checkbox" name="character" value="果断">果断
  142.         <br>
  143.         <input type="checkbox" name="character" value="冷静">冷静
  144.         <br>
  145.         <input type="checkbox" name="character" value="奔放">奔放
  146.         <br>
  147.         <input type="checkbox" name="character" value="内敛">内敛
  148.         <br>
  149.         <input type="checkbox" name="character" value="稳重">稳重
  150.         <div id="showbox2"></div>
  151.         <input type="reset" name="reset" value="重置">
  152.     </form>
  153. </body>
  154. </html>

dom 封装表单控件的更多相关文章

  1. 基于 el-form 封装一个依赖 json 动态渲染的表单控件

    nf-form 表单控件的功能 基于 el-form 封装了一个表单控件,包括表单的子控件. 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾. 毕竟UI库提供的功能都很强大了,不 ...

  2. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  3. MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  4. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  5. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  6. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

  7. 定义表单控件的id和name注意点

    最近在学习JavaScript,在编写一个demo时出现一个错误.为表单中的提交按钮控件定义的id属性值为submit,致使程序出错.如下代码:(js代码省略) <form method=&qu ...

  8. react 项目实战（四）组件化表单/表单控件 高阶组件

    高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...

  9. Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

随机推荐

  1. 关于何时view.setLayoutParams(params);

    1,从view得到LayoutParams  params LayoutParams params = view.getLayoutParams(); 2,可以从用params.height得到当前v ...

  2. QuickStart下的CommandFilter项目 github上自己修改过的版本

    http://docs.supersocket.net/v1-6/zh-CN/Command-Filter 命令筛选的例子 从CommandFilterAttribute派生出新的命令筛选类,然后将这 ...

  3. 手机号段、ip地址归属地大全，最新手机号段归属地,IP地址归属地数据库

    百事通:http://www.114best.com/dh/114.aspx?w=17097232323,联通识别为电信的,1349错 二三四五:http://tools.2345.com/frame ...

  4. 多线程安全的HTTPCLIENT

    private static HttpClient httpClient;     static {           HttpParams params = new BasicHttpParams ...

  5. Navicat数据存放位置和备份数据库路径设置

    navicat的数据库存放位置在什么地方?带着这样的疑问,我们去解决问题,navicat是默认安装,mysql也是默认安装,数据库存在默认用户所在的目录下面. 安装MySQL时,请选择“Custom” ...

  6. 线程——委托InvokeRequired和Invoke

    C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它.此时它将会在内部调用ne ...

  7. opengl截图

    int GetEncoderClsid(const WCHAR* format, CLSID* pClsid) { UINT num = ; // number of image encoders U ...

  8. 【英语】Bingo口语笔记(31) - Bring系列

    bring up 表示在哪长大 要用被动形式 BYOB 请自带酒瓶

  9. [转载] ffmpeg超详细综合教程——摄像头直播

    本文的示例将实现:读取PC摄像头视频数据并以RTMP协议发送为直播流.示例包含了 1.ffmpeg的libavdevice的使用 2.视频解码.编码.推流的基本流程 具有较强的综合性. 要使用liba ...

  10. Android下监听Home键

    网上看到demo,亲测了以下机器和设备,均测试通过: 测试通过的手机: 1.华为荣耀3(Android 4.2.2) 2.小米2s(Android 4.1.1) 3.联想的手机 (Android2.3 ...