基于jQuery的获得各种控件Value的方法


Posted in Javascript onNovember 19, 2010

HTML代码

<asp:RadioButtonList ID="RadioButtonList1" runat="server"> 
<asp:ListItem>1</asp:ListItem> 
<asp:ListItem>2</asp:ListItem> 
<asp:ListItem>3</asp:ListItem> 
<asp:ListItem>4</asp:ListItem> 
</asp:RadioButtonList> 
<div style="text-align: left"> 
<a id="btnGetRadioButtonListValue" href="javascript:">通过Type获得RadioButtonList的Value</a> 
</div> 
<br /> 
<div style="text-align: left"> 
<input type="radio" name="radioSelect" value="A" />A<br /> 
<input type="radio" name="radioSelect" value="B" />B<br /> 
<input type="radio" name="radioSelect" value="C" />C<br /> 
<input type="radio" name="radioSelect" value="D" />D<br /> 
</div> 
<div style="text-align: left"> 
<a id="btnGetRadioValue" href="javascript:">通过Name获得Radio的Value</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<input type="checkbox" name="chkSelect" value="A" />A<br /> 
<input type="checkbox" name="chkSelect" value="B" />B<br /> 
<input type="checkbox" name="chkSelect" value="C" />C<br /> 
<input type="checkbox" name="chkSelect" value="D" />D<br /> 
</div> 
<div style="text-align: left"> 
<a id="btnGetCheckBoxValue" href="javascript:">通过Name获得CheckBox的Value</a> <a id="btnSelectAllOn" href="javascript:">全选</a> <a id="btnSelectAllOff" href="javascript:">反选</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<select id="multiple1" multiple="multiple" style="width: 300px; height: 300px;"> 
<option value="A1">A1</option> 
<option value="A2">A2</option> 
<option value="A3">A3</option> 
<option value="A4">A4</option> 
</select> 
</div> 
<div style="text-align: left"> 
<a id="btnGetMultipleValue" href="javascript:">获得Multiple的Value</a> <a id="btnAddMultipleOption" href="javascript:">添加</a> <a id="btnRemoveMultipleOption" href="javascript:">移除</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<select id="select1"> 
<option value="B1">B1</option> 
<option value="B2">B2</option> 
<option value="B3">B3</option> 
<option value="B4">B4</option> 
</select> 
</div> 
<div style="text-align: left"> 
<a id="btnGetSelectValue" href="javascript:">获得Select的Value</a> <a id="btnAddSelectOption" href="javascript:">添加</a> <a id="btnRemoveSelectOption" href="javascript:">移除</a> 
</div>

jQuery代码
<script type="text/javascript"> 
$(document).ready(function () { 
//获得RadioButtonList的Value 
$("#btnGetRadioButtonListValue").click(function () { 
if ($("input[type=radio]:checked").val() == null) { 
alert("请选择"); 
return false; 
} 
alert($("input[type=radio]:checked").val()); 
}); 
//获得Html的Radio的Value 
$("#btnGetRadioValue").click(function () { 
if ($("input[name='radioSelect']:checked").val() == null) { 
alert("请选择"); 
return false; 
} 
alert($("input[name='radioSelect']:checked").val()); 
}); 
//获得CheckBox的Value 
$("#btnGetCheckBoxValue").click(function () { 
var values = ""; 
$("input[name='chkSelect']").each(function () { 
if ($(this).attr("checked")) { 
values += $(this).val() + ","; 
} 
}); 
if (values == "") { 
alert("请选择"); 
return false; 
} 
values = values.substring(0, values.length - 1); //去掉尾部, 
alert(values); 
}); 
//全选 
$("#btnSelectAllOn").click(function () { 
$("input[name='chkSelect']").each(function () { 
$(this).attr("checked", true); 
}); 
}); 
//返选 
$("#btnSelectAllOff").click(function () { 
$("input[name='chkSelect']").each(function () { 
$(this).attr("checked", false); 
}); 
}); 
//获得Multiple的值 
$("#btnGetMultipleValue").click(function () { 
var values = ""; 
$("#multiple1 option:selected").each(function () { 
values += $(this).val() + ","; 
}) 
values = values.substring(0, values.length - 1); //去掉尾部, 
alert(values); 
}); 
//添加Multiple的Option 
$("#btnAddMultipleOption").click(function () { 
$("#multiple1").append("<option value='AX'>AX</option>"); 
}); 
//移除Multiple所选Option 
$("#btnRemoveMultipleOption").click(function () { 
$("#multiple1 option").remove("option:selected"); 
}); 
//获得Select的值 
$("#btnGetSelectValue").click(function () { 
alert($("#select1 option:selected").val()); 
}); 
//添加Select的Option 
$("#btnAddSelectOption").click(function () { 
$("#select1").append("<option value='BX'>BX</option>"); 
}); 
//移除Select所选Option 
$("#btnRemoveSelectOption").click(function () { 
$("#select1 option").remove("option:selected"); 
}); 
}); 
</script>
Javascript 相关文章推荐
新手常遇到的一些jquery问题整理
Aug 16 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
requireJS使用指南
Apr 27 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
详解angular应用容器化部署
Aug 14 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 #Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 #Javascript
DIV菜单层实现代码
Nov 19 #Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 #Javascript
基于jquery的跨域调用文件
Nov 19 #Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 #Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 #Javascript
You might like
PHP脚本中include文件出错解决方法
2008/11/20 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python3实现随机数
2018/06/25 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
一行python实现树形结构的方法
2019/08/09 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
高中体育教学反思
2014/01/24 职场文书
个人自我鉴定总结
2014/03/25 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
代理词怎么写
2015/05/25 职场文书