以前早就想写篇这样的文章,每次遇到这个问题总是想一阵子,然后按照解题的思路走一遍,走了很多重复的路。所幸今天有空,就写了下来。
代码大概如下,懒得兄弟可以直接到附件里面下载直接看效果
写道
<!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="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
});
function getAllCheckBox(){
$("input[name=testCheckBox]").each(function(){
alert($(this).val() );
});
}
function getSelectCheckBox(){
$("input[name=testCheckBox]").each(function(){
if(this.checked == true){
alert($(this).val() );
}
});
}
function getAllSelect(){
$("#testSelect option").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
function getSelectSelect(){
$("#testSelect option[selected=selected]").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
function getAllMSelect(){
$("#testMSelect option").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
function getSelectMSelect(){
$("#testMSelect option[selected=selected]").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
</script>
</head>
<body>
<p>---------------get checkBox value----------------</p>
<button onclick="getAllCheckBox()">Get All CheckBox Value</button>
<button onclick="getSelectCheckBox()">Get Select CheckBox Value</button>
<p>
<input type="checkbox" name="testCheckBox" value="checkBox1"/>
<input type="checkbox" name="testCheckBox" value="checkBox2"/>
<input type="checkbox" name="testCheckBox" value="checkBox3"/>
<input type="checkbox" name="testCheckBox" value="checkBox4"/>
</p>
<p>---------------get select value----------------</p>
<button onclick="getAllSelect()">Get All Select Value</button>
<button onclick="getSelectSelect()">Get Select Select Value</button>
<p>
<select id="testSelect" name="testSelect">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
</select>
</p>
<p>---------------get mutiple select value----------------</p>
<button onclick="getAllMSelect()">Get All Select Value</button>
<button onclick="getSelectMSelect()">Get Select Select Value</button>
<p>
<select id="testMSelect" name="testMSelect" multiple="multiple">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
</select>
</p>
</body>
</html>
效果图:
主要是来获得checkbox和select option的文本和值。现在还没用到过radio,不过我相信也是这个道理,下次再研究吧
http://blog.csdn.net/yhjhoo/archive/2009/11/06/4776895.aspx 链接是转到我以前转载别人的select选择符的一些内容,很有帮助
- 大小: 35.8 KB
分享到:
相关推荐
jquery操作Radio、Checkbox、Select详细Demo
昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个
简单实用的jquery select2组件
JQuery带checkbox多选的下拉列表,功能非常强大,浏览器兼容性也很强, 浏览器兼容性如下: IE 7+ Chrome 8+ Firefox 10+ Safari 3+ Opera 10.6+ 调用非常强大,扩展性也很强
jquery获取各种radio,checkbox,select的值等
selectclass:’ddl-select’,//选框样式 listboxclass:’ddl-listbox’,//展开的列表框样式 selected:[],//选中的对象value, data:{},//数据,格式:{value:name} onchange:function(text,value){ //回调函数 ...
Jquery操作radio,checkbox,select表单操作实现代码,需要用jquery操作表单的朋友可以参考下。
自己编写的一个jquery多选checkbox下拉框,已经封装好了,直接调用就可以
、根据原有的select 模拟生成新的 select。 2、支持键盘,可通过键盘选择选项。 3、可自定义样式。 4、方便灵活,可选择需要的seletc 进行模拟(非全局模拟) 5、判断用户是否开启脚本支持,若未开启,不进行...
基于jquery自定义表单样式。LazyForm radio,checkbox,select 表单样式自定义
jquery 获得select、radio、checkbox选择的text和value值详解文档
select、checkbox、radio是很常用的表单控件,这篇文章主要介绍了jQuery设置和获取select、checkbox、radio的选中值方法,有兴趣的可以了解一下。
使用JQuery封装的Select&Checkbox&Radio脚本-维豪信息技术有限公司内部, 通过 firefox, ie等系列浏览器测试.
jQuery插件只可以用val方法给input标签的text、...而checkbox、radio属性和select标签就无法直接赋值,必须用遍历的方法使对应项选中。 我自己写了一个jQuery的插件,可以直接用setval方法像赋值一样设定选中项。
jQuery select checkbox radio等基本操作,包括的取值
jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻。时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对其做一些简单的总结
jquery.multi-select.js是一款jQuery多选下拉框插件。该插件可以将select元素转换为带checkbox的多选下拉框,非常实用。
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[@name=items][@checked]’).val(); 获取select被选中项的文本 var ...