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

前端之家收集整理的这篇文章主要介绍了jQuery实现获取选中复选框的值实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

应用场景:

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

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

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

Box" value="0001"/>苹果
  • Box" value="0002"/>梨子
  • Box" value="0003"/>芒果
  • Box" value="0004"/>山楂
  • Box" value="0005"/>香蕉
  • 假设我们只需传递水果的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))

    参数 描述 函数。index - 选择器的 index 位置element - 当前的元素(也可使用 “this” 选择器)

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

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

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

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

    参数 类型 版本 属性名称)属性的“名/值对“对象)属性名称属性值)

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

    示例:

    1.参数name的描述:

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

    选中:

    没选中:

    2.参数perporties描述:

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

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

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

    3.数组

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

    var arr = new Array();

    所以最后的代码

    Jquery复选框练习

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

    总结

    以上所述是小编给大家介绍的jQuery实现获取选中复选框的值。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/jquery/31761.html

    猜你在找的jQuery相关文章