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表单元素的增删改查等操作,大大提高了开发效率。在实际项目中,可以根据具体需求进行组合和扩展,实现更复杂的交互逻辑。
在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...
"LazyForm radio,checkbox,select样式自定义"是一个针对这一需求的解决方案,它基于jQuery库,帮助开发者轻松实现表单组件的个性化设计。 首先,我们来了解一下jQuery。jQuery是一款广泛使用的JavaScript库,它...
特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作,更是频繁出现。下面我们将详细介绍如何使用 jQuery 来获取和设置这些元素的状态。 #### 一、获取和设置 `select` 元素的值 `<select>` 标签用于...
本文将深入探讨“jquery操作表单案例”中的关键知识点,包括输入元素(input)、文本区域(textarea)、单选按钮(radio)、复选框(checkbox)以及选择列表(select)的操作,特别是如何根据选择列表的文本值(text)来选定选项...
### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中,`<select>` 标签用于创建下拉列表,通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...
在众多表单元素中,select(下拉框)、checkbox(复选框)以及radio(单选按钮)是最常用的元素之一。jQuery作为一个功能强大的JavaScript库,其对这些表单元素的操作进行了极大的简化,提高了开发效率和用户体验。...
在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括对select这样的下拉列表的操作。...在实际开发中,熟练掌握jQuery对于操作select和其他表单元素至关重要。
"selectTree tree控件 日历控件 tree控件 radio CheckBox demo"这个标题揭示了几个关键的组件,它们是网页交互中的重要元素。下面将详细介绍这些控件及其应用场景。 1. **selectTree(选择树控件)**: 选择树控件...
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...
在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括处理各种表单元素如radio和checkbox。本文将详细介绍如何使用jQuery改变radio和checkbox的选中状态以及如何获取...
在网页设计和开发中,`radio`、`checkbox` 和 `select` 是三种常见的表单元素,用于收集用户输入的数据。这些元素都是HTML语言的一部分,是构建交互式Web页面的关键工具。下面是对这三个标签的详细解释和总结: 1. ...
以下是一些常见的jQuery表单操作,包括处理复选框(Checkbox)、文本输入(Text)、单选按钮(Radio)以及下拉列表(Select): 1. **复选框(Checkbox)**: - `$("input[name='checkbox_name'][checked]")` 用于...
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[@name=items][@checked]’).val(); 获取select被选中项的文本 var ...
### 知识点详解 ...以上内容总结了通过jQuery获取和操作Radio、CheckBox以及文本框Value值的基本方法。这些操作对于处理表单数据和用户交互非常有用,而且示例代码也方便读者理解和实际应用这些知识点。
标题和描述中提到的知识点主要涉及使用jQuery根据ID获取不同类型的HTML表单元素,包括input、checkbox、radio和select。这些表单元素是Web页面中常见的用于用户交互的元素,它们可以用来收集用户的数据。获取这些...
一款非常强大的表单美化插件,点击颜色替换相应的checkbox和radio样式 多个选项来自定义checkbox和radio 8个回调函数支持 6个方法来编程控制 效果详情可参考http://www.xwcms.net/js/bddm/19041.html
在Web开发中,jQuery作为一个非常流行的JavaScript库,简化了许多复杂的DOM操作,特别是对于表单数据的获取与处理方面提供了极大的便利。本文将详细讲解如何使用jQuery来获取不同类型的表单控件(如文本框、文本域、...
jQuery Mobile 表单自动填充 支持input textare radio checkbox select 等标签