<!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. 短地址TinyURL的API使用

    TinyURL的短地址服务超过10年了,很稳定,官方没有给出API连接,其实很简单: API: 调用:http://tinyurl.com/api-create.php?url=http://URL, ...

  2. UUID的具体用法

    String deleteUuid = UUID.randomUUID().toString(); java.util 类 UUID java.lang.Object java.util.UUID 所 ...

  3. 设置Sublime Text2 中代码提示

    打开sublime text的菜单 Preferences -> Package Settings -> GoSublime ->Settings – User  然后输入 { &q ...

  4. 使用Jenkins构建持续集成环境

    简介 Jenkins是一个开源的持续集成工具,提供了数百种插件供用户选择,能够完成整套持续集成环境的构建. 它具有如下的特点: 持续集成和持续发布 作为可扩展的自动服务器,Jenkins可以作为简单的 ...

  5. UVa 10905 Children's Game

    注意!这不是单纯的字典序排序,比如90.9,应该是990最大 对字符串排序蛋疼了好久,因为别人说string很慢,所以一直没有用过. 看别人用string还是比较方便的,学习一下 对了,这里的cmp函 ...

  6. Codeforces 279 B Books

    题意:给出n本书,总的时间t,每本书的阅读时间a[i],必须按照顺序来阅读,问最多能够阅读多少本书 有点像紫书的第七章讲的那个滑动区间貌似 维护一个区间的消耗的时间小于等于t,然后维护一个区间的最大值 ...

  7. MIPI DSI 和 D-PHY 初始化序列

    MIPI DSI 和 D-PHY 初始化序列 -- 深圳 南山平山村 曾剑锋 参考文档: i.MX 6Dual/6Quad Multimedia Applications Processor Refe ...

  8. 物联网操作系统HelloX已成功移植到MinnowBoard MAX开发板上

    在HelloX开发团队的努力下,以及Winzent Tech公司(总部在瑞典斯德哥尔摩)的支持下,HelloX最新版本V1.78已成功移植到MinnowBoard MAX开发板上.相关源代码已经发布到 ...

  9. webservices上传文件

    客户端: ob_clean(); ob_start(); readfile("D:/44.jpg"); $logo = ob_get_clean(); $pararmArr = a ...

  10. 【英语】Bingo口语笔记(64) - Beat系列