基于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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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
星际流派综述
2020/03/04 星际争霸
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
关于时间计算的结总
2006/12/06 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
splice slice区别
2006/10/09 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
JS实现身份证输入框的输入效果
2017/08/21 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Python如何读写CSV文件
2020/08/13 Python
读书月活动方案
2014/05/22 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
银行转正自我鉴定
2014/09/29 职场文书
顶岗实习协议书
2015/01/29 职场文书
老龙头导游词
2015/02/11 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
大学入学感言
2015/08/01 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android