基于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 相关文章推荐
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP比你想象的好得多
2014/11/27 PHP
详细讲解JS节点知识
2010/01/31 Javascript
Javascript事件实例详解
2013/11/06 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
vue.js中created方法作用
2018/03/30 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
玩转python爬虫之正则表达式
2016/02/17 Python
Python正规则表达式学习指南
2016/08/02 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
消防安全检查制度
2014/02/04 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
行政专员的岗位职责
2014/03/10 职场文书
竞聘书模板
2014/03/31 职场文书
党的生日活动方案
2014/08/15 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
考研导师推荐信范文
2015/03/27 职场文书
护士长2015年终工作总结
2015/04/24 职场文书