开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

具体实现步骤如下：

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

以下是一个示例代码：

<!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元素中的内容会实时更新为选中的复选框值的数组。

相关搜索:jquery中的数据表到数组 jQuery获取数组中的属性值从jQuery中的数组填充复选框和标签属性从数据标记到jQuery的php数组值如何使用jquery javascript在div中查找基于文本的对应数据属性的值如何在Javascript中按唯一属性对数组中的对象进行分组？如何在jQuery中按最近的日期时间重新排列数据属性上的子div？如何将mysql数据中的行循环到唯一的div 如何按名称将行放置到r中数据帧的开头我想插入多维数组的值到php数据库的唯一值

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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.1K2 0

JQuery的学习

属性选择器 * 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器 3. 复合属性选择器 * 语法： $("A[属性名='值'][]...")...}); //<input type="button" value="选取有<em>属性</em>id<em>的</em><em>div</em>元素，然后在结果中选取<em>属性</em>title<em>值</em>含有“es”<em>的</em> <em>div</em> 元素背景色为红色" id="b7"...='text']:disabled").val("bbb"); }); //<input type="button" value=" 利用 <em>jQuery</em> 对象<em>的</em> length <em>属性</em>获取<em>复选框</em>选中<em>的</em>个数...： 1.如果操作<em>的</em>是元素<em>的</em>固有<em>属性</em>，则建议使用pro； 2.如果操作<em>的</em>是元素自定义<em>的</em><em>属性</em>，则建议使用attr * <em>复选框</em>状态checked 和下拉表列<em>中</em>selected...="将反恐放置到city的后面" id="b1"/> $("#b1").click( //append: // $("#city").append

16.6K2 0

Jquery 常见案例

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

6.7K1 0

「jQuery」基础 - 03

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

2.8K3 0

前端成神之路-03_jQuery

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

3K2 0

项目开发知识盲区记录

项目开发知识盲区记录解决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.8K3 1

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")相当于

2K9 0

学习jQuery？这篇文章就够了

中包含 DOM 的个数，比如获取页面上 p 元素的个数 p> 问题 2：获取 id 为 username 元素的 value 属性值...注意：如果通过 jQuery 方法获取页面中元素，没有查找到，返回值不是 null，返回值为一个空数组 []，所以判断是否获取到元素，通过 jQuery.size() != 0 来判断。...说明：这个就是直接选择 html 中的 id=“myDiv”。 1.2、元素选择器 Element，用法：$(“div”) 返回值元素集合。...option 获取 value 属性值，存到一个数组中 var arr = []; $('#s2 > option').each(function(i, domEle){...console.log(arr); // 遍历左边 select 中 option 获取其 value 值，跟上面数组中到对比，若存在，则删除对应 option $(

12.2K1 0

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 表示当前迭代元素的索引或对象的属性名称

3K2 0

Jquery简介选择的

[attribute] 匹配包括给定属性的元素。注意，在jQuery 1.3中。前导的@符号已经被废除！假设想要兼容最新版本号，仅仅须要简单去掉@符号就可以。...[attribute=value] 返回值:Array 概述匹配给定的属性是某个特定值的元素參数 attribute String 属性名 value String...引號在大多数情况下是可选的。但在遇到诸如属性值包括”]”时，用以避免冲突。...不包含select中的option；varc = ops[e.selectedIndex].value;通过获取当前訪问的option对象在数组中的位置。...(s) > 假设某个元素是父元素中唯一的子元素，那将会被匹配假设父元素中含有其它元素，那将不会被匹配。

1.6K2 0

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() 返回当前时间 $.

17K2 0

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

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

5.8K1 0

javaWeb核心技术第五篇之jQuery

- 方式1:jQuery对象[index] - 方式2:jQuery对象.get(index) - 事件(event) "在js的事件中,事件前加on,在jq的事件中通常没有on,直接写名称即可...: [属性] [属性='值'] 表单对象选择器: :enabled :disabled :selected 下拉选 :checked 单选框个复选框 表单选择器...,遍历市数组,将每一个市拼成option插入到市的下拉选中....//a.获取省份的value的值 //b.获取所对应的市数组 //c.获取市的下拉选对象 //d.遍历市数组,将每一个市拼成option插入到市的下拉选中案例2-左右选择...//d.遍历市数组,将每一个市拼成option插入到市的下拉选中*/ $("[name=pro]").change(function(){ //a.获取省份的value的值 //

8K1 0

JQuery基础学习

标签名") 获得所有匹配标签名称的元素注意：获取出来的是一个数组，都为js对象 id选择器语法： $("#id的属性值") 获得与指定id属性值匹配的元素类选择器语法： $(".class的属性值...方法改变表单内不可用元素的值" id="b2"/> <input type="button" value="利用 <em>jQuery</em> 对象<em>的</em> length <em>属性</em>获取<em>复选框</em>选中<em>的</em>个数...{ //因为li标签<em>中</em>没有name这种<em>属性</em>，是我们自定义<em>的</em>，所以使用attr() //获取北京节点<em>的</em>name<em>属性</em><em>值</em>...}); // $("#b2"...city的后面" id="b1"/> <input type=

3.7K2 0

学习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() 方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

8175 0

一个小时学会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.4K7 1

第51次文章：JQuery高级

三个预定的值（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000） easing：用来指定切换效果，默认是"swing",可用参数"linear" swing:动画执行时效果是...setTimeout（执行一次定时器）分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值使用 show/hide方法来完成广告的显示（3）代码实现 <!...（2）分析给开始按钮绑定单击事件定义循环定时器切换小相框的src属性。首先定义数组，存放图片资源路径，然后生成随机数，作为数组索引。 2...."> //使用jQuery插件给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框 //1.定义jQuery的对象插件

3.6K3 0

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

定义入口函数 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.3K2 0

jQuery实战

5、综合案例 复选框 5.1、案例效果 5.2、分析和实现功能分析全选为全选按钮绑定单击事件。获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。...获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。...反选为反选按钮绑定单击事件获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。代码实现 <!...$("#selectNone").click(function(){ //2.获取所有的商品复选框元素，为其添加checked属性，属性值false $(".item...，为其添加checked属性，属性值是目前相反的状态 let items = $(".item"); items.each(function(){

1.9K2 0

jQuery

对象通过 jquery 提供的 API 查询到的对象,是 jQuery 对象 2.jQuery 对象的本质 JQuery 对象时 dom 对象的数组 + JQuery 提供的一系列功能函数。...[attrName=value] 匹配给定的属性是某个特定值的元素代码示例 [attrName]： Hello!...:radio 匹配所有单选按钮 :checked 匹配所有选中的被选中元素(复选框、单选框等，不包括 select 中的 option) 代码示例【:input】： <input.../文本操作标签的属性, 标签体文本方法描述 attr(name) / attr(name, value) 读写非布尔值的标签属性 prop(name) / prop(name, value) 读写布尔值的标签属性...（后代元素） preAll(selector) 查找当前元素之前所有的同辈元素（前的所有兄弟） siblings(selector) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

10.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭