热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JQuery操作三大控件(下拉,单选,复选)的方法

JQuery操作(下拉,单选,复选)Radio、DropDownList、CheckBox三大控件,示例代码如下,感兴趣的朋友可以学习下,希望对大家有所帮助
代码如下:

Radion



1.获取选中值,三种方法都可以:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.设置第一个Radio为选中值:
$('input:radio:first').attr('checked', 'checked');
或者
$('input:radio:first').attr('checked', 'true');
注:attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)
3.设置最后一个Radio为选中值:
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
4.根据索引值设置任意一个radio为选中值:
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
5.根据Value值设置Radio为选中值
$("input:radio[value='rd2']").attr('checked','true');
或者
$("input[value='rd2']").attr('checked','true');
6.删除Value值为rd2的Radio
$("input:radio[value='rd2']").remove();
7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:$("input:radio").eq(2).remove();
8.遍历Radio
$('input:radio').each(function(index,domEle){
//写入代码
});
DropDownList

1. 获取选中项的Value值:
$('select#sel option:selected').val();
或者
$('select#sel').find('option:selected').val();
获取选中项的Text值:
$('select#seloption:selected').text();
或者
$('select#sel').find('option:selected').text();
2. 获取当前选中项的索引值:
$('select#sel').get(0).selectedIndex;
3. 获取当前option的最大索引值:
$('select#sel option:last').attr("index")
4. 获取DropdownList的长度:
$('select#sel')[0].options.length;
或者
$('select#sel').get(0).options.length;
5. 设置第一个option为选中值:
$('select#sel option:first').attr('selected','true')
或者
$('select#sel')[0].selectedIndex = 0;
6.设置最后一个option为选中值:
$('select#sel option:last).attr('selected','true')
7. 根据索引值设置任意一个option为选中值:
$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....
8. 设置Value=4 的option为选中值:
$('select#sel').attr('value','4');
或者
$("select#sel option[value='4']").attr('selected', 'true');
9. 删除Value=3的option:
$("select#sel option[value='3']").remove();
10.删除第几个option:
$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:
$(" select#sel option ").eq(2).remove();
11.删除第一个option:
$(" select#sel option ").eq(0).remove();
或者
$("select#sel option:first").remove();
12. 删除最后一个option:
$("select#sel option:last").remove();
13. 删除dropdownlist:
$("select#sel").remove();
14.在select后面添加一个option:
$("select#sel").append("");
15. 在select前面添加一个option:
$("select#sel").prepend("");
16. 遍历option:
$(' select#sel option ').each(function (index, domEle) {
//写入代码
});
CheckBox




1. 获取单个checkbox选中项(三种写法):
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2. 获取多个checkbox选中项:
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3. 设置第一个checkbox 为选中值:
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4. 设置最后一个checkbox为选中值:
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5. 根据索引值设置任意一个checkbox为选中值:
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
6. 选中多个checkbox:
同时选中第1个和第2个的checkbox:
$('input:radio').slice(0,2).attr('checked','true');
7. 根据Value值设置checkbox为选中值:
$("input:checkbox[value='1']").attr('checked','true');
8. 删除Value=1的checkbox:
$("input:checkbox[value='1']").remove();
9. 删除第几个checkbox:
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10.遍历checkbox:
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
11.全部选中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
12.全部取消选择:
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});

推荐阅读
  • 本周工作重点在于细化用户需求文档,同时深入学习了jQuery的操作技巧及其源码解析。通过阅读知乎上的高质量问答,获取了关于如何有效阅读和理解jQuery源码的专业建议。 ... [详细]
  • 构建Snowflake中的近实时数据摄取管道
    探索如何在Snowflake中构建高效的近实时数据摄取管道,利用其内外表特性及Snowpipe服务,实现数据的快速、稳定加载。 ... [详细]
  • 深入解析Axios与jQuery的核心差异
    本文详细对比了Axios与jQuery在Web前端开发中的应用,探讨两者在异步请求处理、数据封装及请求方式上的不同之处。 ... [详细]
  • 本文介绍了如何利用jQuery库实现HTML页面中节点的创建、添加、删除等操作,并提供了具体的代码示例。 ... [详细]
  • 探讨如何在Vue中确保DOM元素完全渲染后再执行JavaScript代码,特别是涉及动态绑定事件处理程序的情况。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • 本文档详细介绍了如何使用jQuery EasyUI框架中的Dialog对话框组件,包括其基本设置和样式应用。 ... [详细]
  • 本文探讨了在Struts2框架中遇到的两个常见问题:一是特定Action未定义结果input导致的错误;二是前端JavaScript使用jQuery i18n插件时国际化显示不正常的现象。文章详细分析了问题的原因,并提供了有效的解决方案。 ... [详细]
  • 探索PHP中数组遍历的多种方法
    本文深入探讨了PHP中用于数组遍历的四种主要方法,包括传统的for循环、功能强大的foreach循环、结合list()、each()及while()的组合使用,以及利用数组指针进行遍历的技术。 ... [详细]
  • jQuery 1.4.4 已经发布,这是自 1.4.3 版本以来不到一个月的又一更新。本次更新主要集中在基于用户反馈的错误修复,并引入了一项新的功能。 ... [详细]
  • 本文详细介绍了使用 jQuery 对表单中的单选按钮(Radio)、输入框(Input)、复选框(Checkbox)和下拉选择框(Select)进行取值和赋值的方法。通过具体的代码示例,帮助开发者更好地理解和应用这些常用功能。 ... [详细]
  • 探讨 Bootstrap 中是否存在与 jQuery EasyUI 类似的功能丰富的标签页组件,支持通过 URL 加载内容及标签页的关闭功能。 ... [详细]
  • 双向数据绑定技术使得对象属性与用户界面之间可以相互影响,即对象属性的更改能即时反映到界面上,同时用户的界面操作也能同步更新对象状态。本文将介绍如何利用简单的JavaScript代码实现这一功能。 ... [详细]
  • 随着ES6的引入,Promise成为JavaScript处理异步操作的重要工具,极大地简化了回调地狱的问题。通过链式调用的方式,使得代码结构更加清晰和易于维护。本文将探讨如何在旧版浏览器中使用Promise,并提供一个简单的Promise实现。 ... [详细]
  • Django小实战——在线Web计算器(利用Bootstrap进行前端开发)
    Django小实战——在线Web计算器(利用Bootstrap进行前端开发),Go语言社区,Golang程序员人脉社 ... [详细]
author-avatar
Mr_小迪2502897623
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有