首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

按数据属性放置到唯一div中的Jquery复选框数组值

是指通过使用jQuery库中的选择器和属性操作方法,将具有相同数据属性的复选框的值存储到一个数组中,并将该数组的值放置到唯一的div元素中。

具体实现步骤如下:

  1. 首先,给需要进行操作的复选框添加相同的数据属性,例如"data-checkbox"。
  2. 使用jQuery选择器选取所有具有相同数据属性的复选框元素,并使用.each()方法遍历每个复选框。
  3. 在遍历过程中,使用.prop("checked")方法判断复选框是否被选中,如果选中则将其值添加到一个数组中。
  4. 遍历完成后,使用.join()方法将数组中的值以逗号分隔合并为一个字符串。
  5. 最后,使用.text().html()方法将合并后的字符串设置为目标div元素的内容。

以下是一个示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <title>按数据属性放置到唯一div中的Jquery复选框数组值</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="checkbox" data-checkbox="group" value="1">选项1<br>
  <input type="checkbox" data-checkbox="group" value="2">选项2<br>
  <input type="checkbox" data-checkbox="group" value="3">选项3<br>
  <input type="checkbox" data-checkbox="group" value="4">选项4<br>
  <input type="checkbox" data-checkbox="group" value="5">选项5<br>
  
  <div id="result"></div>

  <script>
    $(document).ready(function() {
      var values = [];
      $('input[data-checkbox="group"]').each(function() {
        if ($(this).prop("checked")) {
          values.push($(this).val());
        }
      });
      $('#result').text(values.join(', '));
    });
  </script>
</body>
</html>

在上述示例中,我们首先给复选框添加了相同的数据属性"data-checkbox",然后使用jQuery选择器$('input[data-checkbox="group"]')选取所有具有相同数据属性的复选框元素。接着使用.each()方法遍历每个复选框,并使用.prop("checked")方法判断复选框是否被选中,如果选中则将其值添加到数组中。最后,使用.join()方法将数组中的值以逗号分隔合并为一个字符串,并使用.text()方法将该字符串设置为目标div元素的内容。

这样,当用户选中或取消选中复选框时,div元素中的内容会实时更新为选中的复选框值的数组。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js给数组添加数据的方式js 向数组对象中添加属性和属性值

参考:https://www.cnblogs.com/ayaa/p/14732349.html js给数组添加数据的方式有以下几种: 直接利用数组下标赋值来增加(数组的下标起始值是0) 例,先存在一个有...(arr);  此时的输出结果是[ 1, 2, 3, 5 ]; 通过 数组名.push(参数) 来增加从数组最后一个数据开始增加,push可以带多个参,带几个参,数组最后就增加几个数据 let arr=...用 数组名.splice(开始插入的下标数,0,需要插入的参数1,需要插入的参数2,需要插入的参数3……)来增加数组数据 let arr=[1,2,3]; //splice(第一个必需参数:该参数是开始插入...\删除的数组元素的下标,第二个为可选参数:规定应该删除多少元素,如果未规定此参数,则删除从 第一个参数 开始到原数组结尾的所有元素,第三个参数为可选参数:要添加到数组的新元素) let result=arr.splice...(3,0,7,8,9) console.log(arr);  此时的输出结果是[ 1, 2, 3, 7, 8, 9 ]; 因为举例是从第3个下标开始,所以是直接在数组的最后开始增加数组内容; js 向数组对象中添加属性和属性值

23.5K20
  • Jquery 常见案例

    /jquery/jquery.validate.js"> (2)定义验证规则 直接在页面表单元素中通过属性实现验证规则: 数组。 如果没有符合条件的域,这个数组将会是个空数组,否则它将会包含至少一个值。 是否可以连环调用: 否, 这个方法返回的是一个数组。...这个方法将会清空所有的文本框,密码框,文本域里的值,去掉下拉列表所有被选中的项,让所有复选框和单选框里被选中的项不再选中。...'beforeSubmit'函数调用时需要3个参数:数组形式的表单数据,jQuery 对象形式的表单对象,可选的用来传递给ajaxForm/ajaxSubmit 的对象。...数组形式的表单数据是下面这样的格式: [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 缺省值

    6.7K10

    「jQuery」基础 - 03

    1.7.2 案例:toDoList 分析 刷新页面不会丢失数据,因此需要用到本地存储 localStorage 核心思路: 不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据...1.7.3 案例:toDoList 按下回车把新数据添加到本地存储里面 切记: 页面中的数据,都要从本地存储里面获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面。...利用事件对象.keyCode判断用户按下回车键(13)。 声明一个数组,保存数据。 先要读取本地存储原来的数据(声明函数 getData()),放到这个数组里面。...核心原理:先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li 我们可以给链接自定义属性记录当前的索引号 根据这个索引号删除相关的数据----数组的splice(i, 1)方法 存储修改后的数据...点击之后,获取本地存储数据。 修改对应数据属性 done 为当前复选框的checked状态。

    2.8K30

    前端成神之路-03_jQuery

    文本框里面输入内容,按下回车,就可以生成待办事项。 // 2. 点击待办事项复选框,就可以把当前数据添加到已完成事项里面。 // 3. 点击已完成事项复选框,就可以把当前数据添加到待办事项里面。...核心思路: 不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据 // 3....// 2.利用事件对象.keyCode判断用户按下回车键(13)。 // 3.声明一个数组,保存数据。 // 4.先要读取本地存储原来的数据(声明函数 getData()),放到这个数组里面。...// 2.核心原理:先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li // 3.我们可以给链接自定义属性记录当前的索引号 // 4.根据这个索引号删除相关的数据----数组的splice...// 2.点击之后,获取本地存储数据。 // 3.修改对应数据属性 done 为当前复选框的checked状态。

    3K20

    项目开发知识盲区记录

    项目开发知识盲区记录 解决ajax请求下,后台页面跳转无效问题 layui数据表格的使用和分页失效的问题解决 layui的数据表格的cols属性设置列的二维数组的[[....]]和thymeleaf的语法重复...,因此在使用springboot的模板引擎进行渲染时,会报错误,解决方法如下: 从ajax的回调函数(success等)中取返回值 layui-table表复选框勾选的所有行数据获取 html网页什么样的字体最好看...---Error resolving template layui复选框操作相关记录 layui批量获取复选框选中的值 controller层接收前端数组形式的请求参数 1....第一种方式 页面正常通过Key-Value的形式传值,数组保持原格式,后端使用@RequestParam注解标注接值的入参,注意@RequestParam里的value一定要带上中括号: controller...,对应的id值,方便我们后面修改对应开关值状态 还可以将需要传递的数据,写入属性中 <!

    6.9K32

    JQuery选择器(中)

    : 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"..."]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*...=a_value"]):attr属性的属性值中包含a_value 7.伪类选择器 具有限定子节点选择器:$("mix1[mix2]"):返回包含mix2的mix1节点.如:$("div[a]"):包含a...:类型为E,允许或被禁止的用户界面元素 E:checked:类型为E,处于选中状态的用户界面元素(例如单选按钮或复选框) E:visible:选择所有可见元素(display值为block或visible...:选取单前节点的父节点 @:选取属性,这个在之前说过了(属性选择器) nodename:选取节点下的所有节点 jQuery中的应用: 根节点是很少用到的,常用的如下面的例子: $("div/p")相当于

    2K90

    jq---方法总结

    对象,他们包含筛选到的元素 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first(); // 选取ul li中匹配的第一个元素...属性 find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象 children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象 $("selector...checked属性值 $("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框) $("selector....map()用于遍历数组元素或对象属性,并将每次执行遍历函数的返回值封装为数组返回 var obj = { name: "jQuery", age: 20, isAdmin: true }; var resultArray...= $.map( obj, function(value, i){ // 注意参数顺序与each()不同 // value 表示当前迭代的数组元素或对象的属性值 // i 表示当前迭代元素的索引或对象的属性名称

    3K20

    WEB入门之十五 属性和样式

    本章简介 在前面几章的示例中,凡是牵涉到属性和样式操作的,我们依然是通过传统的DOM来实现的。...表6-1-2 attr函数 ​attr函数​ ​说明​ attr ( "属性名" ) 按属性名获取某属性的值 attr ( "属性名" , 属性值) 按属性名设置某属性的值 下面我们通过具体的示例来演示...这是因为在使用attr函数获得checked属性的值时,如果复选框处于选中状态,则获得true;如果复选框处于未选中状态,则获得undefined,并非false。...表6-1-4 css函数 ​css函数​ ​说明​ css( "属性名" ) 按属性名获取某属性样式的值 css( "属性名" , 属性值) 按属性名设置某属性样式的值 下面我们通过一个示例来演示css...,鼠标悬浮/离开时边框颜色改变的样式 如果要使用css函数同时操作多个样式属性,那么可以参考示例6.5中的代码,语法归结如下所示: jQuery元素 . css ( { "属性名" : 属性值 , "属性名

    9310

    jQuery 教程

    ”) 所有选中的复选框选项 .selector $(selector).selector 在jQuery 1.7中已经不被赞成使用。...,并把返回的数据放置到指定的元素中 serialize() 编码表单元素集为字符串以便提交 serializeArray() 编码表单元素集为 names 和 values 的数组 jQuery 属性...返回被 jQuery 选择器匹配的 DOM 元素的数量 toArray() 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素 pushStack() 将一个DOM元素集合加入到jQuery...inArray() 在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1) $.isArray() 判断指定参数是否是一个数组 $.isEmptyObject() 检查对象是否为空(不包含任何属性...() 指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回 $.merge() 合并两个数组内容到第一个数组 $.noop() 一个空函数 $.now() 返回当前时间 $.

    17K20

    WEB入门之十五 属性和样式

    本章简介 在前面几章的示例中,凡是牵涉到属性和样式操作的,我们依然是通过传统的DOM来实现的。...表6-1-2 attr函数 attr函数 说明 attr ( "属性名" ) 按属性名获取某属性的值 attr ( "属性名" , 属性值) 按属性名设置某属性的值 下面我们通过具体的示例来演示attr...这是因为在使用attr函数获得checked属性的值时,如果复选框处于选中状态,则获得true;如果复选框处于未选中状态,则获得undefined,并非false。...表6-1-4 css函数 css函数 说明 css( "属性名" ) 按属性名获取某属性样式的值 css( "属性名" , 属性值) 按属性名设置某属性样式的值 下面我们通过一个示例来演示css函数的用法...,鼠标悬浮/离开时边框颜色改变的样式 如果要使用css函数同时操作多个样式属性,那么可以参考示例6.5中的代码,语法归结如下所示:jQuery元素 . css ( { "属性名" : 属性值 , "属性名

    6010

    全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

    通过选择器定位获取的dom对象,此时会转变为 jQuery对象 9.1 基本选择器 id选择器:通过dom对象的id定位dom对象,通过id找对象,id在当前页面中是唯一的。...对象数组中dom对象的顺序和声明dom对象时的顺序保持一致 div>1div> dom1 div>2div> dom2 div>3div> dom3 $("div") == [dom1...DOM 对象的 【value 属性】 $(选择器).val() :无参数调用形式, 读取数组中第一个 DOM 对象的 value 属性值 $(选择器).val(值):有参形式调用;对数组中所有 DOM...$(选择器).attr(“属性名”,“值”) : 对数组中所有 DOM 对象的属性设为新值。...$.ajax()可以写入到doGet()中。也可以写入到 doPost()中。

    5.9K10

    学习jQuery这一篇就够了

    jQuery 核心对象:即执行 jQuery 核心函数返回的对象,jQuery 对象内部包含的是 dom 元素对象的伪数组 (可能只有一个元素),jQuery 对象拥有很多有用的属性和方法,让程序员能方便的操作...="zh-CN">zh-CN $('a[hreflang*="CN"]').css('background', 'red'); 需求描述:选择 hreflang 属性用空格分隔的值中包含一个给定值为...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从 0 到 length - 1,其他对象通过其属性名进行迭代。...jQuery 核心对象 # 3.1 属性 # 3.1.1 属性 # 1. attr() 方法描述:专门操作属性值为非布尔值的属性,该方法读写一体。...($('#content').attr('title')); # 2. prop() 方法描述:专门操作属性值为布尔值的属性,该方法读写一体。

    1K50

    一个小时学会jQuery

    2.3、DOM转换成jQuery对象 要使用jQuery中的方法与属性就需要把一个JavaScript中的DOM对象转换成jQuery对象。...,返回布尔值 $('li').has('ul') //包含特定后代的节点 $("div").children() //div中的每个子节点,第一层 $("div").find("span") //查找...//返回文档中所有图像的src属性值 $("img").attr("src","node.jpg"); //设置所有图像的src属性 $("img").removeAttr("src");    //将文档中图像的.../遍历一个数组或对象,for循环 $.inArray() //返回一个值在数组中的索引位置,不存在返回-1 $.grep()   //返回数组中符合某种标准的节点 $.extend({a:1,b:2}...5.3、发送数据到服务器 默认情况下,Ajax请求使用GET方法。如果要使用POST方法,可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

    18.6K71

    前端中那些让你头疼的英文单词

    定义入口函数 function 函数 document.getElementById 通过id来从整篇文档中找对应的元素(innerHTML控制标签内容,className控制class属性,其他的标签属性按原名称写...单击(js中,在jQuery中是click) onmouseover鼠标滑过 onmouseout 鼠标离开 上面的内容如果哪一个单词忘记了具体的用法,可以点击链接查看具体内容:JavaScript入门...---- for和while都是循环时使用 array 数组 push 添加(数组结尾添加数据) pop 删除(数组结尾删除数据) splice 删除添加数据 reverse 倒置 indexOf 下标...(某个数据在数组中第一次出现的下标)去重的时候使用 content 内容 setInterval多次定时器 setTimeout 单次定时器 position 位置 absolute绝对的 relative...,肯定会有第三个功能,这个功能会集成那两个功能,这个功能的名称单词中肯定会有toggle) val (jQuery中的val是专门来修改访问value属性值的) value 值 prop 访问修改属性值

    2.3K20
    领券