<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body {

    margin: 0;

    padding: 0;

    font-family: '微软雅黑';

}

form {

    border: 1px solid #eee;

    border-radius: 10px;

    width: 600px;

    margin: 50px auto;

    padding: 20px;

    line-height: 28px;

    position: relative;

}

form label {

    display: block;

    font-weight: bold;

    padding: 10px 0;

}

form input {

    margin-left: -3px;

    margin-right: 5px;

}

#showbox1, #showbox2 {

    border: 1px solid #eee;

    width: 160px;

    position: absolute;

    right: 30px;

    top: 30px;

    background: #DEFEF3;

    padding: 20px;

    display: none;

}

input[type="reset"]{

    float: right;

}

</style>

<script type="text/javascript">

window.onload = function ()

{

    var oform1 = document.getElementById('form1'),

        oform2 = document.getElementById('form2');

        oshowbox1 = document.getElementById('showbox1');

        oshowbox2 = document.getElementById('showbox2');

    function getchecked(form,name)

    {

        arr = [];

        for(var i = 0; i < form[name].length; i++ )

        {

            if(form[name][i].checked == true)

            {

                arr.push(form[name][i].value)

            }

        }

        if(form[name][0].type == 'radio')

        {

            return arr[0];

        }

        if(form[name][0].type == 'checkbox')

        {

            return arr;

        }

    };

    for(var i = 0; i < oform1.income.length; i++ )

    {

        oform1.income[i].onclick = function ()

        {

            showbox1.style.display = 'block';

            showbox1.innerHTML = '您现在得收入是：' + getchecked(oform1,'income');

        }

    }

    for(var i = 0; i < oform2.character.length; i++ )

    {

        oform2.character[i].onclick =function ()

        {

            showbox2.style.display = 'block';

            showbox2.innerHTML = '您现在得收入是：' + getchecked(oform2,'character').join(' ');

        }

    }

    oform1.onreset = function ()

    {

        var re = confirm ('你确定要重置吗？');

        if(re)

        {

            showbox1.style.display = 'none';

            return true;

        }

        else

        {

            return false;

        }

    }

    oform2.onreset = function ()

    {

        var re = confirm('你确定要重置吗？');

        if(re)

        {

            showbox2.style.display = 'none';

            return true;

        }

        else

        {

            return false;

        }

    }    

}

</script>

</head>

<body>

    <form id="form1">

        <label>您的月收入水平是：</label>

        <input type="radio" name="income" value="1000元以下">1000元以下<br/>

        <input type="radio" name="income" value="1000~3000元">1000~3000元<br/>

        <input type="radio" name="income" value="3000~5000元">3000~5000元<br/>

        <input type="radio" name="income" value="5000~10000元">5000~10000元<br/>

        <input type="radio" name="income" value="10000~20000元">10000~20000元<br/>

        <input type="radio" name="income" value="20000元以上">20000元以上

        <div id="showbox1"></div>

        <input type="reset" name="reset" value="重置">

    </form>

    <form id="form2">

        <label>您的性格是：</label>

        <input type="checkbox" name="character" value="开朗">开朗

        <br>

        <input type="checkbox" name="character" value="随性">随性

        <br>

        <input type="checkbox" name="character" value="阴郁">阴郁

        <br>

        <input type="checkbox" name="character" value="果断">果断

        <br>

        <input type="checkbox" name="character" value="冷静">冷静

        <br>

        <input type="checkbox" name="character" value="奔放">奔放

        <br>

        <input type="checkbox" name="character" value="内敛">内敛

        <br>

        <input type="checkbox" name="character" value="稳重">稳重

        <div id="showbox2"></div>

        <input type="reset" name="reset" value="重置">

    </form>

</body>

</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. Android HTTPS(3) IOException: Hostname 解决方案

    Common Problems with Hostname Verification As mentioned at the beginning of this article, there are ...

  2. [转载]流式大数据处理的三种框架：Storm，Spark和Samza

    许多分布式计算系统都可以实时或接近实时地处理大数据流.本文将对三种Apache框架分别进行简单介绍,然后尝试快速.高度概述其异同. Apache Storm 在Storm中,先要设计一个用于实时计算的 ...

  3. UVa 122 (二叉树的层次遍历) Trees on the level

    题意: 输入一颗二叉树,按照(左右左右, 节点的值)的格式.然后从上到下从左到右依次输出各个节点的值,如果一个节点没有赋值或者多次赋值,则输出“not complete” 一.指针方式实现二叉树 首先 ...

  4. Repeater上下排序按钮

    aspx代码 <table cellspacing="0" cellpadding="0" width="100%" align=&q ...

  5. 一行JS代码，解决DedeCMS TAG标签错误输入符号问题

    在维护内容的时候, Tag标签输入经常要来回切换输入法,  只能通过','号分隔.  中文用户, 输入法出来的经常是全角的, 经常弄错, 增加了检查的工作量,  现在只要一句JS代码, 就自动替换所有 ...

  6. 关闭oom killer

    最近有位 VPS 客户抱怨 MySQL 无缘无故挂掉,还有位客户抱怨 VPS 经常死机,登陆到终端看了一下,都是常见的 Out of memory 问题.这通常是因为某时刻应用程序大量请求内存导致系统 ...

  7. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  8. erl_0013 erlang 带参数模块 parameterized modules are no longer supported

    code: -module(mod_test, [Name]). -export([show/0]). show() -> io:format("show:~p~n",[Na ...

  9. 【英语】Bingo口语笔记(63) - 一个单词的多种发音

  10. android动画学习

    android动画学习   转载自:http://www.open-open.com/lib/view/open1329994048671.html 3.0以前,android支持两种动画模式,twe ...