jQuery实现获取选中复选框的值实例详解


Posted in jQuery onJune 28, 2018

应用场景:

我们应该经常见到系统中出现列表,会有一个对列表数据的操作(如删除, 修改,查看等)。我们可以在每个列表项后面加一个删除按钮,把列表项的相关参数(如 id)post到后台进行删除。当然如果你每次只要删除一两条数据这样子做并没有什么问题,但是如果你需要一次性删 除100条,你还去一条 条的删除吗?每一次删除10条会不会更好些呢?

好了,接下来。我们就使用jQuery解决这个问题。

首先,假设我们需要删除5个列表项。HTML里面列表标签是ul和ol, 其中ul是无序的,而ol是有序。每一个列表项使用li。

<ul id="fruit">
 <li><input type="checkbox" value="0001"/>苹果</li>
 <li><input type="checkbox" value="0002"/>梨子</li>
 <li><input type="checkbox" value="0003"/>芒果</li>
 <li><input type="checkbox" value="0004"/>山楂</li>
 <li><input type="checkbox" value="0005"/>香蕉</li>
</ul>

假设我们只需传递水果的ID到后台就可以删除所有水果。那么传递一个数组为[0001,0002,0003,0004,0005]到后台就可以了。所以,我们需要获取5个li元素中input标签的value值。

很明显,你的思路可能是利用jQuery筛选器先得到li下的input对象数组,再遍历这个数组,判断每一个input对象,然后判断input对象是否选中,选中就用val()函数获取它的值,然后把该值放入一个用来存储id的数组arr中。

【关键点】选择器,遍历,数组。

1.获取被选中的数组对象

jQuery的选择器中' :checkbox' 是查找所有复选框。

$("#fruit :checkbox");

2.遍历这个对象数组

jQeury的each函数:为每个匹配元素规定运行的函数。

each函数:

语法:

$(selector).each(function(index,element))

参数 描述
function(index,element) 必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置element - 当前的元素(也可使用 “this” 选择器)

遍历后,判断复选框是否被选中.

Jquery的prop函数(prop函数是jQuery1.6版本上的):

prop(name|properties|key,value|fn)

获取在匹配的元素集中的第一个元素的属性值。随着一些内置属性的DOM元素 或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误

参数 类型 版本
name(属性名称) String V1.6
properties(作为属性的“名/值对“对象) Map(String, Object) V1.6
key,function(index, attr) (属性名称,属性值) String, Function V1.6

[注意]key,function(index,attr)中返回的属性值的函数,第一个参数为当前
 元素的索引值,第二个参数为原先的属性值。

示例:

1.参数name的描述:

选中复选框的为true, 没选中为false

选中:

$("input[type='checkbox']").prop("checked",true);

没选中:

$("input[type='checkbox']").prop("checked",false);

2.参数perporties描述:

禁用页面上的所有复选框。

$("input[type='checkbox']").prop({disabled:true});

3.参数key,回调函数描述:

通过函数来设置所有页面上的复选框反选。

$("input[type='checkbox']").prop("checked",fucntion(i, val){
 return !val;
});

3.数组

 这个最简单。jQuery定义一个数组。

var arr = new Array();

所以最后的代码:

<!DOCTYPE html>
<html>
<head>
 <title>Jquery复选框练习</title>
 <!-- 引入jQuery,引入你自己的jQuery文件 -->
 <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
</head>
<body>
 <div>
  <p>选择要购买的水果</p>
  <ul class="fruit">
   <li><input type="checkbox" value="001"/>苹果</li>
   <li><input type="checkbox" value="002"/>雪梨</li>
   <li><input type="checkbox" value="003"/>芒果</li>
   <li><input type="checkbox" value="004"/>菠萝</li>
  </ul>
  <input type="checkbox" id="All"/>
  <button id="checkAll">全选</button>
  <button id="nothing">全不选</button>
  <button id="reverseAll">反选</button>
  <button class="chooseFruit">购买</button>
  <script type="text/javascript">
   <!-- 选择全部/全不选 -->
   $("#All").click(function(){
    if("this.checked"){
     $("#fruit :checkbox").prop("checked", true);
    }else{
     $("#fruit :checkbox").prop("checked", false);
    }
   });
   <!--选择全部-->
   $("#checkAll").click(function(){
    $("#fruit :checkbox").prop("checked", true);
   });
   <!--全不选-->
   $("#nothing").click(function(){
    $("#fruit :checkbox").prop("checked", false);
   });
   <!--反选-->
   $("#reverseAll").click(function(){
    $("#fruit :checkbox").each(function(i){
     $(this).prop("checked", !$(this).prop("checked"));
    });
   });
   <!--获取选中复选框的值-->
   $(".chooseFruit").click(function(){
    var arr = new Array();
    $("#fruit :checkbox[checked]").each(function(i){
     arr[i] = $(this).val();
    });
    var vals = arr.join(",");
    console.log(vals);
   });
  </script>
 </div>
</body>
</html>

至此,jQuery实现了复选框的取值,是不是非常简单?

总结

以上所述是小编给大家介绍的jQuery实现获取选中复选框的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 #jQuery
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
You might like
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
在Python中使用模块的教程
2015/04/27 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Python实现Event回调机制的方法
2019/02/13 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
校车安全责任书
2014/08/25 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python