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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery实现购物车全功能
Jan 11 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php的字符串用法小结
2010/06/08 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
华为python面试题
2016/05/03 面试题
劳动实践课感言
2014/02/01 职场文书
决心书标准格式
2014/03/11 职场文书
商铺门面租房协议书
2014/10/21 职场文书
感谢信模板大全
2015/01/23 职场文书
患者身份识别制度
2015/08/06 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript