`
bsr1983
  • 浏览: 1100923 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[转载] Jquery操作radio,checkbox,select表单操作实现代码

 
阅读更多
转自:http://www.oschina.net/code/snippet_70229_3175
一 、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);
分享到:
评论

相关推荐

    Jquery操作radio,checkbox,select表单操作实现代码

    Jquery操作radio,checkbox,select表单操作实现代码,需要用jquery操作表单的朋友可以参考下。

    LazyForm radio,checkbox,select样式自定义

    基于jquery自定义表单样式。LazyForm radio,checkbox,select 表单样式自定义

    jquery获取input表单值的代码

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...

    jQuery设置和获取select、checkbox、radio的选中值方法

    select、checkbox、radio是很常用的表单控件,这篇文章主要介绍了jQuery设置和获取select、checkbox、radio的选中值方法,有兴趣的可以了解一下。

    Jquery 获取表单text,areatext,radio,checkbox,select值的代码

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[@name=items][@checked]’).val(); 获取select被选中项的文本 var ...

    jquery实现表单美化特效包括checkbox和radio美化特效插件

    一款非常强大的表单美化插件,点击颜色替换相应的checkbox和radio样式 多个选项来自定义checkbox和radio 8个回调函数支持 6个方法来编程控制 效果详情可参考http://www.xwcms.net/js/bddm/19041.html

    jquery操作表单案例

    包括最常用的表单操作,取值赋值清空,比较实用,比较简单。包括input,textarea,radio,checkbox,select.另外根据select的文本值text来让select选中。

    jquery text,radio,checkbox,select操作实现代码

    控制表单元素: 文本框,文本区域: $(“#txt”).attr(“value”)或者$(“#txt”).val()//获取值 $(“#txt”).attr(“value”,”);//清空内容 $(“#txt”).attr(“value”,’11’);//填充内容 多选框checkbox: $(“#...

    jQuery Mobile 表单自动填充

    jQuery Mobile 表单自动填充 支持input textare radio checkbox select 等标签

    【开源】jQuery oform beta 0.1.5 - form 表单美化插件源代码

    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 表单验证插件

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型。 支持服务器端校验。 支持输入格式的校验。

    一个基于jquery的页面表单草稿自动保存代码

    支持input type为 text,textarea,checkbox,radio,select,password,hidden的草稿自动保存 hidden的特殊性,因为hidden要手动触发change事件,当值改变的时候要 手动代码 .change() 触发一下才会保存相应的草稿 要实现...

    【开源】jQuery oform beta 0.1.7 - form 表单美化插件源代码

    版权:zhang yang soft ...支持 reset 按钮 刷新 radio / checkbox / select 优化核心代码 时间: 2010-2-6 8. beta 0.1.7 版 支持"组织机构代码"校验 时间: 2010-2-22 jquery oform 美化 插件 开源

    Jquery知识点三 jquery表单对象操作

    在Jquery中这三个函数如果有参数的话就是赋值操作,没有参数则是取值操作,其中val()是一个很重要的方法,和它相关的表单对象如:input系的标签、select、textarea等都是用于和服务器端交互的标签元素,所以要搞清楚...

    jQuery操作表单常用控件方法小结

    下面的JS代码列出了jQuery操作表单常用控件(包括select,radiobox,checkbox)的常用方法,相信一定有你需要的 操作radio的html代码 Radion &lt;input type="radio" name="rd" id="rd1" checked="checked" value=...

    jQuery oform beta 0.1.3 - form 表单美化插件源代码

    支持input radio 单选按钮美化 时间:2010-01-26 3. beta 0.1.2 版 支持input checkbox 多选按钮美化 修改、优化核心代码 时间:2010-01-28 4. beta 0.1.3 版 支持 select 优化部分代码 时间:2010-01...

    jquery获取元素值的方法(常见的表单元素)

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...

Global site tag (gtag.js) - Google Analytics