文档建议反馈控制台
首页
学习
活动
专区
工具
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元素中的内容会实时更新为选中的复选框值的数组。

相关搜索:jQuery获取数组中的属性值从数据标记到jQuery的php数组值按索引计算Numpy数组中唯一值的和按属性值筛选数组中的对象- Javascript从jQuery中的数组填充复选框和标签属性jquery中的数据表到数组根据jQuery中的数据属性对div进行排序按jQuery中不同对象数组中的值过滤对象数组按数组中属性值的和进行kotlin分组按数据帧中的多个组标记唯一值如何按名称将行放置到r中数据帧的开头如何在Javascript中按唯一属性对数组中的对象进行分组？按嵌套对象数组中的属性值对对象数组进行排序如何在jQuery中按最近的日期时间重新排列数据属性上的子div？如何使用jquery javascript在div中查找基于文本的对应数据属性的值我想插入多维数组的值到php数据库的唯一值如何将mysql数据中的行循环到唯一的div根据动态传递的属性从对象数组中获取唯一值根据属性值按组过滤对象数组-来自JSON响应的数据点击按钮后，如何将多个类的数据属性值输入到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.4K20

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.6K20

    • 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.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

    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

    一个小时学会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.5K71

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

    99050

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

    定义入口函数 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

    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.8K20

    Jump Start Bootstrap 第4章

    一旦链接和图标被正确放置，您就可以创建一个ul列表来表示下拉菜单中的链接列表。...要创建此复选框组，您需要一个带有类”btn-group”的包裹按钮，这个还应该具有一个data-toggle=”buttons”属性来切换数据。...此外，您还必须在所有的这些按钮中都包含一个统一name属性值，从而在逻辑上对这些按钮进行分组。在本例中，我还将btn-default替换为btn-info，这将使按钮的颜色从灰色改为浅蓝色。...导航条仅由内部链接作为href属性的值组成。当用户开始滚动时，导航栏中的相应链接将按当前显示的部分高亮显示。 让我们先建立一个navbar，下面是代码： <!...: false } $("#myModal").modal(options); backdrop属性接受布尔值或字符串值“static”。

    28.3K40
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券