<!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. [HDOJ1160]FatMouse's Speed（DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1160 FatMouse believes that the fatter a mouse is, th ...

  2. 谈谈Perforce

    实习就要结束了,收获之一就是学会了使用Perforce! Perforce SCM System是一款构建于可伸缩客户/服务器结构之上的软件配置管理工具.仅仅应用 TCP/IP,开发人员就能够通过多种 ...

  3. 【转】对Android开发者有益的40条优化建议

    下面是开始Android编程的好方法: 找一些与你想做事情类似的代码 调整它,尝试让它做你像做的事情 经历问题 使用StackOverflow解决问题 对每个你像添加的特征重复上述过程.这种方法能够激 ...

  4. 10.10 dos试验

    一. 实验目的 (1)认识DOS: (2)掌握命令解释程序的原理: (3)掌握简单的DOS调用方法: (4)掌握C语言编程初步. 二. 实验内容和要求 编写类似于DOS,UNIX的命令行解释程序 (1 ...

  5. HeadFirst Jsp 14 (Structs)

    大的web程序可能很复杂, 分很多”层” 有关 RMI 的部分, 可以参考 headfirst java 中的 RMI 的部分. struts 是一个框架, 框架是一些接口和类的集合, 这些接口和类设 ...

  6. How to install Node.js on Linux

    How to install Node.js on Linux Posted on November 13, 2015 by Dan Nanni Leave a comment Question: H ...

  7. bzoj4127

    肯定是树链剖分+线段树,关键是怎么维护 绝对值和这个东西显然不能简单的合并标记 因为对于负数,加之后绝对值和是变小的 那我们考虑对负数和非负数数分别维护 下面的问题就是经过操作如果负数变成了正数怎么办 ...

  8. poj 1934(LCS)

    转自:http://www.cppblog.com/varg-vikernes/archive/2010/09/27/127866.html 1)首先按照常规的方法求出最长公共子序列的长度也就是用O( ...

  9. Trianglify – 五彩缤纷的 SVG 背景图案

    Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3 ...

  10. vijos 1379 字符串的展开

    23333333333333333 #include<iostream> #include<cstdio> #include<cstring> #include&l ...