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& ...
随机推荐
- Objective-C官方文档翻译 Block
版权声明:原创作品,谢绝转载!否则将追究法律责任. 一个Objective-c类定义了一个对象结合数据相关的行为.有时候,这使得他有意义的表达单个任务或者单元的行为.而不是集合的方法. blocks是 ...
- JQuery让input从disabled变成enabled
JQuery让input从disabled变成enabled document.getElementByIdx_x("removeButton").disabled = false ...
- md笔记——使用 @font-face 引入你喜欢的字体
使用 @font-face 引入你喜欢的字体 原理 CSS3的自定义字体@font-face 规则的工作原理 使用@font-face规则初看起来非常简单.从本质上看,它只需要两个步骤. 首先,使用 ...
- js简繁转换，两种实现方式，妥妥的~
不知道繁简按钮有什么卵用,大陆人自带繁简转换开关的好么,但是还是项目要求,做了这么一个功能,现在整理给大家用~完美兼容~么么哒 按钮的样式可以随便用css定义,注意id不要变,注意jq的事件绑定好就o ...
- 更新cydia“sub-process/usr/libexec/cydia/cydo returned anerror code（2）”是怎么回事？
最近更新cydia的时候出现了sub-process/usr/libexec/cydia/cydo returned anerror code(2)的红字是怎么回事? 解决方法:删掉有关升级的东西,把 ...
- UUID 生成（源代码编译）
根据定义,UUID(Universally Unique IDentifier,也称GUID)在时间和空间都是唯一的.为保证空间的唯一性,每个UUID使用了一个48位的值来记录,一般是计算机的网卡地址 ...
- STL模板_十大容器概念
一.向量(续)1.大小和容量大小:容器中元素的个数.容量:容器中可容纳元素的个数.size_type size (void) const; // 获取大小void resize (size_type ...
- BZOJ 1565: [NOI2009]植物大战僵尸( 最小割 )
先拓扑排序搞出合法的, 然后就是最大权闭合图模型了.... --------------------------------------------------------------------- ...
- R与数据分析旧笔记（十五） 基于有代表性的点的技术：K中心聚类法
基于有代表性的点的技术:K中心聚类法 基于有代表性的点的技术:K中心聚类法 算法步骤 随机选择k个点作为"中心点" 计算剩余的点到这个k中心点的距离,每个点被分配到最近的中心点组成 ...
- clip原理
1.clip的概述: clip是修剪之意 clip有4个属性值:inherit auto rect(20px,40px,60px,0px) !important 其中有作用的仅rect这个属性值,着重 ...