一 、Select
jQuery获取Select选择的Text和Value:
1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery设置Select选择的Text和Value:
1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
2. $("#select_id ").val(4); //设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
jQuery添加/删除Select的Option项：
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
7. $("#SelectID").remove(); //删除所有项
二、Checkbox
全选/取消
jQuery.attr 获取/设置对象的属性值,如：
$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态（是否选中）
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true
$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值
下面的代码是获取上面实例中选中的checkbox的value值:
<script type="text/javascript">
var arrChk=$("input[name='chk_list'][checked]");
$(arrChk).each(function(){
window.alert(this.value);
});
});
</script>
1,获取checkbox的value
$("#checkboxID").value或$("input[type='checkbox']").eq(n).attr("checked").value
2,设置选中项
$("input[type='checkbox']").eq(1).attr("checked")//设置第一个checkbox为选中的项
3,删除所有checkbox
$("input[type='checkbox']").remove()
4,checkbox方法
$(document).ready(function() {
var check = $("input[type='checkbox']");
check.each(function(n) {
check.eq(n).bind("click", function() {
if (check.eq(n).attr("checked") != false) {
var value = check.eq(n).val();
alert(value);
}
else {
alert(check.eq(n).attr("checked"));
}
})
});
});
三、radio
1,获取选中的value值
$("input[type='radio']:checked").val();
2,设置指定的项为当前选中项
$("input[type='radio']").eq(1).attr("checked", true);//设置第二项为选中项
$("input[type='radio'][value='值']").attr("checked, true");
3,解决多个Radio
$("input[type='radio'][@name='rdoTest2']").eq(0).attr("checked", true);
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery操作radio,checkbox,select</title>
<script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#uname').blur(function(){
if($('#uname').val()=='')
{
$('#err').html('*');
}
else
{
$('#err').html('');
}
});
$('#see').click(function(){
if($('#uname').val()=='')
{
$('#err').html('*');
}
else
{
$('#err').html('');
$('#name').html($('#uname').val());
}
//$('#xingbie').html($(':radio:checked').val());
$('#xingbie').html($("[name='aa']:checked").val());
var str="";
$("[name='bbb']:checked").each(function(){
str+=$(this).val()+" ";
});
$('#shengfen').html(str);
//$('#nianfen').html($('#nf').find('option:selected').text());//text
$('#nianfen').html($('#nf').find('option:selected').val());//value
});
$('#quan').click(function(){
$("[name='ccc']").attr('checked','true');
});
$('#buxuan').click(function(){
$("[name='ccc']").removeAttr('checked');
});
$('#fan').click(function(){
$("[name='ccc']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
});
});
$('#kan').click(function(){
var ss="";
$("[name='ccc']:checked").each(function(){
ss+=$(this).val()+" ";
});
$('#seee').html(ss);
});
});
</script>
<table width="300" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="30%" align="center">用户名：</td>
<td width="60%"><input type="text" id="uname" /></td>
<td width="10%"><div style="color:#F00" id="err"></div></td>
</tr>
<tr>
<td align="center">性 别：</td>
<td><input name="aa" type="radio" id="ta1" value="男" checked="checked"/>男 <input name="aa" type="radio" id="ta2" value="女"/>女</td>
<td> </td>
</tr>
<tr>
<td align="center">省 份：</td>
<td><input name="bbb" type="checkbox" id="ck1" value="北京"/>北京<input name="bbb" type="checkbox" id="ck2" value="上海"/>上海</td>
<td> </td>
</tr>
<tr>
<td align="center">年 份：</td>
<td><select id="nf">
<option value="2008">2008年</option>
<option value="2009">2009年</option>
<option value="2010">2010年</option>
</select></td>
<td> </td>
</tr>
<tr>
<td align="center">输出姓名</td>
<td><div id="name"></div></td>
<td> </td>
</tr>
<tr>
<td align="center">输出性别</td>
<td><div id="xingbie"></div></td>
<td> </td>
</tr>
<tr>
<td align="center">输出省份</td>
<td><div id="shengfen"></div></td>
<td> </td>
</tr>
<tr>
<td align="center">输出年份</td>
<td><div id="nianfen"></div></td>
<td> </td>
</tr>
<tr>
<td align="center">结 果：</td>
<td><input type="button" id="see" value="输出结果" /></td>
<td> </td>
</tr>
</table>
<table width="300" border="1" cellspacing="1" cellpadding="1">
<tr>
<td align="center">省 份：</td>
<td><input name="ccc" type="checkbox" id="cck1" value="北京"/>北京<input name="ccc" type="checkbox" id="cck2" value="上海"/>上海<input name="ccc" type="checkbox" id="cck3" value="广州"/>广州</td>
<td> </td>
</tr>
<tr>
<td align="center"> </td>
<td><input name="ccc" type="checkbox" id="cck4" value="天津"/>天津<input name="ccc" type="checkbox" id="cck5" value="其他"/>其他</td>
<td> </td>
</tr>
<tr>
<td align="center">输 出：</td>
<td><div id="seee"></div></td>
<td> </td>
</tr>
<tr>
<td align="center">结 果：</td>
<td><input type="button" id="quan" value="全选" /><input type="button" id="buxuan" value="不选" /><input type="button" id="fan" value="反选" /><input type="button" id="kan" value="查看" /></td>
<td> </td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
基于jquery自定义表单样式。LazyForm radio，checkbox，select 表单样式自定义
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...
select、checkbox、radio是很常用的表单控件，这篇文章主要介绍了jQuery设置和获取select、checkbox、radio的选中值方法,有兴趣的可以了解一下。
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获取一组radio被选中项的值 var item = $(‘input[@name=items][@checked]’).val(); 获取select被选中项的文本 var ...
包括最常用的表单操作，取值赋值清空，比较实用，比较简单。包括input,textarea,radio,checkbox,select.另外根据select的文本值text来让select选中。
一款非常强大的表单美化插件，点击颜色替换相应的checkbox和radio样式 多个选项来自定义checkbox和radio 8个回调函数支持 6个方法来编程控制 效果详情可参考http://www.xwcms.net/js/bddm/19041.html
控制表单元素： 文本框,文本区域： $(“#txt”).attr(“value”)或者$(“#txt”).val()//获取值 $(“#txt”).attr(“value”,”);//清空内容 $(“#txt”).attr(“value”,’11’);//填充内容 多选框checkbox： $(“#...
jQuery Mobile 表单自动填充 支持input textare radio checkbox select 等标签
jQuery oform beta 0.1.5 - form 表单美化插件源代码 版权：zhang yang soft 交流E-Mail：oceancode@163.com 浏览器支持：IE、Firefox、Opera , google chrome (谷歌) 版本说明： 1. beta 0.1.0 版 支持input...
jQuery formValidator表单验证插件，它是基于jQuery类库，实现了...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型。 支持服务器端校验。 支持输入格式的校验。
支持input type为 text,textarea,checkbox,radio,select,password,hidden的草稿自动保存 hidden的特殊性，因为hidden要手动触发change事件，当值改变的时候要 手动代码 .change() 触发一下才会保存相应的草稿 要实现...
版权：zhang yang soft ...支持 reset 按钮 刷新 radio / checkbox / select 优化核心代码 时间: 2010-2-6 8. beta 0.1.7 版 支持"组织机构代码"校验 时间: 2010-2-22 jquery oform 美化 插件 开源
在Jquery中这三个函数如果有参数的话就是赋值操作，没有参数则是取值操作，其中val()是一个很重要的方法，和它相关的表单对象如：input系的标签、select、textarea等都是用于和服务器端交互的标签元素，所以要搞清楚...
下面的JS代码列出了jQuery操作表单常用控件（包括select，radiobox，checkbox）的常用方法，相信一定有你需要的 操作radio的html代码 Radion <input type="radio" name="rd" id="rd1" checked="checked" value=...
支持input radio 单选按钮美化 时间：2010-01-26 3. beta 0.1.2 版 支持input checkbox 多选按钮美化 修改、优化核心代码 时间：2010-01-28 4. beta 0.1.3 版 支持 select 优化部分代码 时间：2010-01...
jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...