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基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
Laravel实现表单提交
2017/05/07 PHP
JavaScript模板入门介绍
2012/09/26 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
Vue组件开发初探
2017/02/14 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
MySQL面试题
2014/01/12 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
医院辞职信范文
2014/01/17 职场文书
校运会口号
2014/06/18 职场文书
小学社团活动总结
2014/06/27 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
工作证明英文模板
2014/10/21 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
建党伟业观后感
2015/06/01 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js