<!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. 自定义View(9)关于onLayout

    1,何时被调用 当外层容器组件调用其内部组件的layout(l,r,t,b)时,内部组件的onLayout就被调用.与onMeasure类似. 2,注意 onLayout对ViewGroup及子类才有 ...

  2. 在单机Hadoop上面增加Slave

    之前的文章已经介绍了搭建单机Hadoop, HBase, Hive, Spark的方式:link 现在希望在单机的基础上,加一个slave. 首先需要加上信任关系,加信任关系的方式,见前一篇文章:li ...

  3. OpenStack(0) - Table of Contents

    1. Keystone OpenStack Identity Service2. Starting OpenStack Image Service3. Starting OpenStack Compu ...

  4. 'String' does not conform to protocol 'CollectionType' Error in Swift 2.0

    如下是报错需要修改的源码: // if count(currentPassword) < 6 || count(newPassword) < 6 || count(confirmPassw ...

  5. App开放接口api安全性—Token签名sign的设计与实现

    前言 在app开放接口api的设计中,避免不了的就是安全性问题,因为大多数接口涉及到用户的个人信息以及一些敏感的数据,所以对这些接口需要进行身份的认证,那么这就需要用户提供一些信息,比如用户名密码等, ...

  6. [转]FFMPEG视音频编解码零基础学习方法

    在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...

  7. opengl截图

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

  8. jquery的jquery c.browser msie undefined的问题解决办法

    http://blchen.com/jQuery-can-not-read-property-msie-of-the-undefined-error-solution/ 转载: [jQuery] Ca ...

  9. Linux中用stat命令查看文件时3个时间点解析

    有些时候,我们需要在Linux中使用stat命令来查看文件的详细信息.另外联想下,ls -l命令显示的是什么时间,touch命令修改文件的时间戳,修改的又是什么时间?在这里我们一起来试验下. 首先,我 ...

  10. 多数据源问题--Spring+Ibatis 访问多个数据源（非分布式事务）

    有的时候,我在一个工程中需要访问两个以上的数据源,尤其是在系统集成的时候,以下是我在系统集成的时候遇到的情况,我的工程的架构是:spring2.0+ibatis2.0+struts1.2. 数据库是o ...