`
doris1bruce
  • 浏览: 4642 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Jquery操作radio,checkbox,select表单操作

阅读更多
01 一 、Select
02 jQuery获取Select选择的Text和Value:
03 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
04 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
05 3. var checkValue=$("#select_id").val(); //获取Select选择的Value
06 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
07 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
08  
09 jQuery设置Select选择的Text和Value:
10 1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
11 2. $("#select_id ").val(4); //设置Select的Value值为4的项选中
12 3. $("#select_id option[text='jQuery']").attr("selected"true); //设置Select的Text值为jQuery的项选中
13  
14 jQuery添加/删除Select的Option项:
15 1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
16 2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
17 3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
18 4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
19 5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
20 6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
21 7. $("#SelectID").remove(); //删除所有项
22  
23 二、Checkbox
24 全选/取消
25 jQuery.attr 获取/设置对象的属性值,如:
26 $("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态(是否选中)
27 $("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true
28 $("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
29 $("#img_1").attr("src"); //读取ID为img_1的<img>src值
30 下面的代码是获取上面实例中选中的checkbox的value值:
31 <script type="text/javascript">
32 var arrChk=$("input[name='chk_list'][checked]");
33 $(arrChk).each(function(){
34 window.alert(this.value);
35 });
36 });
37 </script>
38  
39 1,获取checkbox的value
40 $("#checkboxID").value或$("input[type='checkbox']").eq(n).attr("checked").value
41 2,设置选中项
42 $("input[type='checkbox']").eq(1).attr("checked")//设置第一个checkbox为选中的项
43 3,删除所有checkbox
44 $("input[type='checkbox']").remove()
45 4,checkbox方法
46 $(document).ready(function() {
47 var check = $("input[type='checkbox']");
48 check.each(function(n) {
49 check.eq(n).bind("click"function() {
50 if (check.eq(n).attr("checked") != false) {
51 var value = check.eq(n).val();
52 alert(value);
53 }
54 else {
55 alert(check.eq(n).attr("checked"));
56 }
57 })
58 });
59 });
60  
61 三、radio
62 1,获取选中的value值
63 $("input[type='radio']:checked").val();
64 2,设置指定的项为当前选中项
65 $("input[type='radio']").eq(1).attr("checked"true);//设置第二项为选中项
66 $("input[type='radio'][value='值']").attr("checked, true");
67  
68 3,解决多个Radio
69  
70 $("input[type='radio'][@name='rdoTest2']").eq(0).attr("checked"true);
分享到:
评论

相关推荐

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

    在网页开发中,jQuery库为...通过以上代码,我们可以轻松地完成对radio、checkbox和select表单元素的增删改查等操作,大大提高了开发效率。在实际项目中,可以根据具体需求进行组合和扩展,实现更复杂的交互逻辑。

    jquery获取各种radio,checkbox,select的值等

    在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...

    LazyForm radio,checkbox,select样式自定义

    "LazyForm radio,checkbox,select样式自定义"是一个针对这一需求的解决方案,它基于jQuery库,帮助开发者轻松实现表单组件的个性化设计。 首先,我们来了解一下jQuery。jQuery是一款广泛使用的JavaScript库,它...

    Jquery 操作 Dom 标签 select

    特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作,更是频繁出现。下面我们将详细介绍如何使用 jQuery 来获取和设置这些元素的状态。 #### 一、获取和设置 `select` 元素的值 `&lt;select&gt;` 标签用于...

    jquery操作表单案例

    本文将深入探讨“jquery操作表单案例”中的关键知识点,包括输入元素(input)、文本区域(textarea)、单选按钮(radio)、复选框(checkbox)以及选择列表(select)的操作,特别是如何根据选择列表的文本值(text)来选定选项...

    jquery 获得select、radio、checkbox选择的text和value值

    ### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中,`&lt;select&gt;` 标签用于创建下拉列表,通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...

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

    在众多表单元素中,select(下拉框)、checkbox(复选框)以及radio(单选按钮)是最常用的元素之一。jQuery作为一个功能强大的JavaScript库,其对这些表单元素的操作进行了极大的简化,提高了开发效率和用户体验。...

    JQuery操作select

    在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括对select这样的下拉列表的操作。...在实际开发中,熟练掌握jQuery对于操作select和其他表单元素至关重要。

    selectTree tree控件 日历控件 tree控件 radio CheckBox demo

    "selectTree tree控件 日历控件 tree控件 radio CheckBox demo"这个标题揭示了几个关键的组件,它们是网页交互中的重要元素。下面将详细介绍这些控件及其应用场景。 1. **selectTree(选择树控件)**: 选择树控件...

    jquery获取input表单值的代码

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

    Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

    在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括处理各种表单元素如radio和checkbox。本文将详细介绍如何使用jQuery改变radio和checkbox的选中状态以及如何获取...

    radio、checkbox、select等选择标签的总结

    在网页设计和开发中,`radio`、`checkbox` 和 `select` 是三种常见的表单元素,用于收集用户输入的数据。这些元素都是HTML语言的一部分,是构建交互式Web页面的关键工具。下面是对这三个标签的详细解释和总结: 1. ...

    jQuery常见的表单操作

    以下是一些常见的jQuery表单操作,包括处理复选框(Checkbox)、文本输入(Text)、单选按钮(Radio)以及下拉列表(Select): 1. **复选框(Checkbox)**: - `$("input[name='checkbox_name'][checked]")` 用于...

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

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

    jQuery获取Radio,CheckBox选择的Value值(示例代码)

    ### 知识点详解 ...以上内容总结了通过jQuery获取和操作Radio、CheckBox以及文本框Value值的基本方法。这些操作对于处理表单数据和用户交互非常有用,而且示例代码也方便读者理解和实际应用这些知识点。

    jQuery根据ID获取input、checkbox、radio、select的示例

    标题和描述中提到的知识点主要涉及使用jQuery根据ID获取不同类型的HTML表单元素,包括input、checkbox、radio和select。这些表单元素是Web页面中常见的用于用户交互的元素,它们可以用来收集用户的数据。获取这些...

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

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

    jquery获取表单值

    在Web开发中,jQuery作为一个非常流行的JavaScript库,简化了许多复杂的DOM操作,特别是对于表单数据的获取与处理方面提供了极大的便利。本文将详细讲解如何使用jQuery来获取不同类型的表单控件(如文本框、文本域、...

    jQuery Mobile 表单自动填充

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

Global site tag (gtag.js) - Google Analytics