checkbox、select、radio的设置与获取

参考链接：http://www.cnblogs.com/xiaopin/archive/2011/09/13/2175190.html

js版本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>

<body>

复选框：

<input type="checkbox" name="checkbox1" value="1" checked/>1

<input type="checkbox" name="checkbox1" value="2"/>2

<input type="checkbox" name="checkbox1" value="3" checked/>3

<input type="checkbox" name="checkbox1" value="4"/>4

<input type="checkbox" name="checkbox1" value="5"/>5

<br/>

单选框：

<input type="radio" id="radio1" name="radio1" value="1" checked>1

<input type="radio" id="radio2" name="radio1" value="2">2

<input type="radio" id="radio3" name="radio1" value="3">3

<br/>

下拉框：

<select id="select1">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<br/>

<button onclick="sub();">提交</button><br/>

<button onclick="fun1();">选择4，5复选框</button><button onclick="fun1_2()">全选</button><br/>

<button onclick="fun2();">选择3单选框</button><br/>

<button onclick="fun3();">选择2下拉框</button><br/>

<script type="text/javascript">

    function fun1() {

        //复选框设置值

        var oCheckbox = document.getElementsByName("checkbox1");

        var arr = [];

        var index = 0;

        for (var i = 0; i < oCheckbox.length; i++) {

            if (oCheckbox[i].value == 4 || oCheckbox[i].value == 5) {

                oCheckbox[i].checked = true;

            } else {

                oCheckbox[i].checked = false;

            }

        }

    }

    function fun1_2() {

        //复选框设置值

        var oCheckbox = document.getElementsByName("checkbox1");

        for (var i = 0; i < oCheckbox.length; i++) {

                oCheckbox[i].checked = true;

        }

    }

    function fun2() {

        //单选框设置值

        var oRadio = document.getElementsByName("radio1");

        for (var i = 0; i < oRadio.length; i++) {

            if (oRadio[i].value == 3) {

                oRadio[i].checked = true;

                break;

            }

        }

    }

    function fun3() {

        //下拉框设置值

        var oSelect = document.getElementById("select1");

        oSelect.value = 2;

        //由option的text来选中选中

        for (i = 0; i < oSelect.options.length; i++) {

            alert("Element " + i + " is " + oSelect.options(i).text +

            " and has the value " + oSelect.options(i).value);

        }

        oSelect.options(0).selected = true;

    }

    function sub() {

        //复选框获取值

        var oCheckbox = document.getElementsByName("checkbox1");

        var arr = [];

        var index = 0;

        for (var i = 0; i < oCheckbox.length; i++) {

            if (oCheckbox[i].checked) {

                arr[index++] = oCheckbox[i].value;

            }

        }

        alert("复选框：" + arr.toString());

        //单选框获取值

        var oRadio = document.getElementsByName("radio1");

        var rvalue = 0;

        for (var i = 0; i < oRadio.length; i++) {

            if (oRadio[i].checked) {

                rvalue = oRadio[i].value;

                break;

            }

        }

        alert("单选框：" + rvalue);

        //下拉框获取值

        var oSelect = document.getElementById("select1");

        alert("下拉框：" + oSelect.value);

    }

</script>

</body>

</html>

jQuery版本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>

</head>

<body>

复选框：

<input type="checkbox" name="checkbox1" value="1" checked/>1

<input type="checkbox" name="checkbox1" value="2"/>2

<input type="checkbox" name="checkbox1" value="3" checked/>3

<input type="checkbox" name="checkbox1" value="4"/>4

<input type="checkbox" name="checkbox1" value="5"/>5

<br/>

单选框：

<input type="radio" id="radio1" name="radio1" value="1" checked>1

<input type="radio" id="radio2" name="radio1" value="2">2

<input type="radio" id="radio3" name="radio1" value="3">3

<br/>

下拉框：

<select id="select1">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<br/>

<button onclick="sub();">提交</button><br/>

<button onclick="fun1();">选择4，5复选框</button><br/>

<button onclick="fun2();">选择3单选框</button><br/>

<button onclick="fun3();">选择2下拉框</button><br/>

<script type="text/javascript">

    $(document).ready(function () {

    });

    function fun1() {

        //复选框设置值

        var oCheckbox = $("input[name=checkbox1]");

        var arr = [];

        var index = 0;

        for (var i = 0; i < oCheckbox.length; i++) {

            if (oCheckbox[i].value == 4 || oCheckbox[i].value == 5) {

                oCheckbox[i].checked = true;

            } else {

                oCheckbox[i].checked = false;

            }

        }

    }

    function fun2() {

        //单选框设置值

        var oRadio = $("input[name=radio1]");

        for (var i = 0; i < oRadio.length; i++) {

            if (oRadio[i].value == 3) {

                oRadio[i].checked = true;

                break;

            }

        }

    }

    function fun3() {

        //下拉框设置值

        var oSelect = $("#select1");

        oSelect.val(2);

    }

    function sub() {

        //复选框获取值

        var oCheckbox = $("input[name=checkbox1]");

        var arr = [];

        var index = 0;

        for (var i = 0; i < oCheckbox.length; i++) {

            if (oCheckbox[i].checked) {

                arr[index++] = oCheckbox[i].value;

            }

        }

        alert("复选框：" + arr.toString());

        //单选框获取值

        var oRadio = $("input[name=radio1]");

        var rvalue = 0;

        for (var i = 0; i < oRadio.length; i++) {

            if (oRadio[i].checked) {

                rvalue = oRadio[i].value;

                break;

            }

        }

        alert("单选框：" + rvalue);

        //下拉框获取值

        var oSelect = $("#select1");

        alert("下拉框：" + oSelect.val());

    }

</script>

</body>

</html>

checkbox、select、radio的设置与获取的更多相关文章

asp.mvc获取checkbox、radio、select的值
记录一下在asp.mvc中,提交表单时后台获取checkbox.radio.select值的方法. 1.获取select的值 <select name="type"> ...
jq 操作radio，设置选中、获取选中值
<label><input type="radio" name="sex" value="1">男</labe ...
Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
Jquery操作select、checkbox、radio详细讲解
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
Jquery 操作Html 控件 CheckBox、Radio、Select 控件【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...
html自定义checkbox、radio、select —— select篇
上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...
html自定义checkbox、radio、select —— checkbox、radio篇
前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...
validate针对checkbox、radio、select标签的验证
jQuery.validate 是jquery的一个插件,用来辅助开发者在客户端方便快捷的实现表单验证,最终达到提高用户体验的目的. 示例代码 <form id="formLogin& ...

随机推荐

Go语言简单的TCP编程
前期准备需要import "net"包 IP类型,其中一个重要的方法是IP.ParseIP(ipaddr string)来判断是否是合法的IP地址 TCP Client func ...
POJ 2342 树形DP入门题
有一个大学的庆典晚会,想邀请一些在大学任职的人来參加,每一个人有自己的搞笑值,可是如今遇到一个问题就是假设两个人之间有直接的上下级关系,那么他们中仅仅能有一个来參加,求请来一部分人之后,搞笑值的最大是 ...
C#程序设计六大原则记录
本文目的在于记录,方便以后的回顾 http://www.uml.org.cn/sjms/201211023.asp 设计模式六大原则(1):单一职责原则定义:不要存在多于一个导致类变更的原因.通俗的 ...
GridView.GridLines 属性
GridLines.None 不显示网格线. GridLines.Horizontal 仅显示水平网格线. GridLines.Vertical 仅显示垂直网格线. GridLines.Both 同时 ...
for循环计算某个数的阶乘、阶乘和及其倒数的阶乘和
//4的阶乘 int jc = 4; //定义一个变量用来代表要计算的数值 long jd =1; //定义最终输出的阶乘 for(int i = 1; i <= jc;i++) //定义循环加 ...
hadoop之hdfs学习
简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Go ...
spring拦截器的定义
(一).拦截器的定义 1.为什么需要拦截器:在做身份认证或者是进行日志的记录时,我们需要通过拦截器达到我们的目的 2.什么事拦截器:在AOP(Aspect-Oriented Programming)中 ...
windows8 安装IIS 和添加网站（转）
Internet Information Services(IIS,互联网信息服务),是由微软公司提供的基于运行Microsoft Windows的互联网基本服务.最初是Windows NT版本的可选 ...
Data Mining
数据探索: 数据探索有助于选择合适的数据处理与数据分析技术.它甚至可以解决一些数据挖掘问题. 1.汇总统计:量化用单个数或数据的集合展示数据的特性: 如集合的平均值.方差. 2.可视化技术:以图形或表 ...
.NET(C#)：觉察XML反序列化中的未知节点
原文 www.cnblogs.com/mgen/archive/2011/12/12/2284554.html 众所周知XML是可以扩展的,XML的元素可以靠名称识别而不是只按照未知识别.在 XML反 ...

checkbox、select、radio的设置与获取

checkbox、select、radio的设置与获取的更多相关文章

随机推荐

热门专题