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

使用JS从表单输入复选框中获取数据属性

可以通过以下步骤实现:

  1. 首先,获取所有复选框元素的引用。可以使用document.querySelectorAll()方法来选择所有的复选框元素,传入相应的选择器,例如input[type="checkbox"]
  2. 创建一个空数组来存储选中的复选框的值。
  3. 遍历复选框元素的引用列表,使用forEach()方法或者for...of循环来遍历。
  4. 在遍历的过程中,检查每个复选框元素的checked属性是否为true,表示该复选框被选中。
  5. 如果复选框被选中,可以通过getAttribute()方法获取复选框的数据属性值。传入相应的数据属性名称作为参数,例如getAttribute("data-属性名")
  6. 将获取到的数据属性值添加到之前创建的数组中。
  7. 最后,可以使用获取到的数据属性值进行后续的处理或者发送到服务器。

以下是一个示例代码:

代码语言:txt
复制
// 获取所有复选框元素的引用
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// 创建一个空数组来存储选中的复选框的值
const selectedValues = [];

// 遍历复选框元素的引用列表
checkboxes.forEach(checkbox => {
  // 检查复选框是否被选中
  if (checkbox.checked) {
    // 获取复选框的数据属性值
    const dataAttribute = checkbox.getAttribute("data-属性名");
    
    // 将数据属性值添加到数组中
    selectedValues.push(dataAttribute);
  }
});

// 打印选中的复选框的值
console.log(selectedValues);

这样,你就可以通过上述代码从表单输入复选框中获取数据属性,并将选中的复选框的值存储在一个数组中,以供后续处理或发送到服务器使用。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云开发(Serverless):https://cloud.tencent.com/product/tcb
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(TBC):https://cloud.tencent.com/product/tbc
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iothub
  • 腾讯云直播(CSS):https://cloud.tencent.com/product/css
  • 腾讯云音视频(TME):https://cloud.tencent.com/product/tme
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用DNS和SQLi数据获取数据样本

泄露数据的方法有许多,但你是否知道可以使用DNS和SQLi数据获取数据样本?本文我将为大家介绍一些利用SQL盲注DB服务器枚举和泄露数据的技术。...在最近的一个Web应用测试,我发现了一个潜在的SQLi漏洞。使用Burp的Collaborator服务通过DNS交互最终我确认了该SQL注入漏洞的存在。...我尝试使用SQLmap进行一些额外的枚举和泄露,但由于SQLmap header的原因WAF阻止了我的请求。我需要另一种方法来验证SQLi并显示可以服务器恢复数据。 ?...此外,在上篇文章我还引用了GracefulSecurity的文章内容,而在本文中它也将再次派上用场。 即使有出站过滤,xp_dirtree仍可用于网络泄露数据。...在下面的示例,红框的查询语句将会为我们Northwind数据返回表名。 ? 在该查询你应该已经注意到了有2个SELECT语句。

11.5K10

04_使用JS完成功能

1.使用JS完成表单校验 分析思路 1.确定使用事件onsubmit事件 2.书写函数 3.对输入项进行非空判断 为表单绑定一个事件 <form action="#" method...("user"); //获取输入表单对象,对象调用属性value属性 就可以获取输入的值。...); //获取用户输入数据 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue...) 第三步:离焦事件绑定的函数(获取用户输入的内容进行判断) 第四步:如果失败,在span位置给出错误提示信息,如果成功,让span内容为空。...onchange:当用户改变内容的时候使用这个事件(二级联动) 7.使用JS完成全选和选不选操作 技术分析 确定事件(鼠标单击事件onclick),事件绑定到编号前面的复选框里面 获取编号前面的复选框的状态

3.9K60

javaWeb核心技术第三篇之JavaScript第一篇

"编写外部的js文件,通过srcipt标签的src属性引入即可" - 注意事项: " script标签可以放在页面的任何位置,一般放在head 一个页面可以有多个..."通过对象的value属性 对象.value;" 回顾: javaScript:直译式的脚本语言,直接嵌入html使用即可 js和html整合: 方式1:内联式 通过...script标签实现,直接在标签体编写js代码即可 方式2:外联式(首先要编写外部的js文件,后缀名以*.js结尾) 通过script标签的src属性实现 js组成部分: ECMAScript...; 获取 对象.属性名称 = 值; 设置 ///////////////////////////////// 案例1-完善表单校验 需求分析: 当表单提交的时候,校验表单的用户名和密码是否符合格式...2.编写函数 a.获取头部复选框状态 对象.checked; b.获取其他的复选框对象 c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性 案例4

2.3K10

登录注册小案例实现(使用Django的form表单来进行用户输入数据的校验)

使用is_valid()方法可以验证用户提交的数据是否合法,而且HTML表单元素的name必须和django表单的name保持一致,否则匹配不到....(比如此例request.POST获取的HTML表单元素的name属性值与form表单的name是一样的:username,password) is_bound属性:用来表示form是否绑定了数据,...最大长度 min_length 最小长度 widget 负责渲染网页上HTML 表单输入元素和提取提交的原始数据 attrs 包含渲染后的Widget 将要设置的HTML 属性 error_messages...(2)在本案例实战使用这个form表单: 在此名为mucis的app下创建forms.py的文件,编写表单校验(用户登录和注册的数据校验): from django import forms from...""" # def clean(self): # 前端表单用户输入数据经过上面过滤后再结合后台数据库所有数据进行分析 # # 校验数据是否有该用户 #

4.3K00

16 处理表单数据与父子组件之间的数据交换

input类型 父子组件的表单数据交换 1,使用sync 2,使用v-model模式 处理表单输入 vue开发获取表单输入的值,不是像JQuery那样是主动查询一个Html组件,然后访问其属性...vue获取表单输入数据,是通过被动的方式。在vue组件有输入操作时,主动将数值绑定到data变量上;在提交表单前,data数据源取得表单数据。...这些类型的input组件,都可以以一种自定义组件的方式使用之。 父子组件的表单数据交换 在vue开发我们经常会需要定义一个子组件,然后在这个子组件获取表单数据,需要往父组件传递。...使用v-model获取了原生input组件的输入,并绑定在currentValue变量之上。...使用这种sync模式,假设属性为xxx,要求为: 1,在子组件属性变化时,主动派发一个“update:xxx”事件,并附带xxx的值 2,在父组件使用:xxx.sync将数据双向绑定到一个data

2.6K10

JS的常用操作

一、使用 JS 完成注册表单数据校验 1.需求分析 用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样 会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台...:对用户输入数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交?...三 、使用 JS 完成页面定时弹出广告 1.需求分析 我们希望在首页的顶部做一个定时弹出广告图片。...(该对象开发不怎么常用) ** Screen 对象** Screen 对象包含有关客户端显示屏幕的信息。(该对象开发不怎么常用) 五 、使用 JS 完成注册页面表单校验 JS的事件 ?...element.setAttribute() 把指定属性设置或更改为指定值。 element.removeChild() 元素移除子节点。

8.1K10

登录注册小案例实现(使用Django的form表单来进行用户输入数据的校验)

登录注册案例 1.登录注册第一步——创建模型生成数据表: (1)名为mucis的app下的models.py文件创建: from django.db import models # Create your...models.CharField(max_length=30, unique=True) password = models.CharField(max_length=50) (2)执行映射文件生成数据表...: 2.基本框架的搭建 (1)登录注册登出视图函数框架编写: (mucis/views.py文件~) from django.views import View #使用类视图,要导入!...真正使用的时候注册需要的信息是比登录要多,所以这俩不可能使用同一个模板。本处为了方便讲解,所以只建了个含有用户名和密码的模型。所以会造成注册和登录可以用同一个模板的假象!...不信你看我在下面注册模板又随便加了个输入框,但是其实它没用,我只是为了强调这个问题! <!

4.7K00

Python爬虫学习,记一次抓包获取jsjs函数数据的过程

大概看了下,是js加载的,而且数据js函数,很有意思,就分享出来给大家一起看看! 抓取目标 ?...今天我们的目标是上图红框部分,首先我们确定这部分内容不在网页源代码,属于js加载的部分,点击翻页后也没有json数据传输! ?...但是发现有个js的请求,点击请求,是一行js函数代码,我们将其复制到json的视图查看器,然后格式化一下,看看结果 ? ?...只是其内容,需要在进行处理一下,我们写到代码中看看 开始写代码 先导入库,因为最终需要从字符串截取部分,所以用requests库获取请求,正则re匹配内容即可。然后我们先匹配出上述3项 ?...后记 新浪新闻的页面js函数比较简单,可以直接抓到数据,如果是比较复杂的函数的话,就需要深入理解前端知识了,这也是为什么学爬虫,需要学习前端知识的原因!

3.6K10

Python爬虫学习,记一次抓包获取jsjs函数数据的过程

大概看了下,是js加载的,而且数据js函数,很有意思,就分享出来给大家一起看看!...抓取目标 今天我们的目标是上图红框部分,首先我们确定这部分内容不在网页源代码,属于js加载的部分,点击翻页后也没有json数据传输!...但是发现有个js的请求,点击请求,是一行js函数代码,我们将其复制到json的视图查看器,然后格式化一下,看看结果 发现里面有可能存在我们需要的内容,比如url、title、intro这3个参数,...猜测就是对应的新闻URL、标题、简介 只是其内容,需要在进行处理一下,我们写到代码中看看 开始写代码 先导入库,因为最终需要从字符串截取部分,所以用requests库获取请求,正则re匹配内容即可。...后记 新浪新闻的页面js函数比较简单,可以直接抓到数据,如果是比较复杂的函数的话,就需要深入理解前端知识了,这也是为什么学爬虫,需要学习前端知识的原因!

3.8K20

文档和元素的几何滚动

"]'); 使用document.forms来进行选择表单,返回的是一个类数组 document.forms 对于表单使用elements获取表单的name的一些属性值,因为有些时候会出现重叠的问题。...js获取表单元素的数组 document.forms.shipping.elements.method 即可 将会获取表单属性 表单和元素属性 js的对象支持两个方法,一个为submit()一个为reset...还有一个onreset事件处理程序来检测表单的重置。表单提交前将会调用onsubmit程序,如果回调函数的返回值为false则会取消表单的提交动作。这是js程序一个用来检查用户的输入错误。...当用户在一个文本域输入文本或从下拉列表中选择一个选项后就触发change事件,当用户在一个文本域中该数据不是每次用户输入一个键值时都会触发该事件。它仅仅当用户改变了值才会触发该事件。...使用场景:对用户表单进行输入的验证 具体的后面有事件,继续写。 其过程如下 先触发onsubmit事件 → 接着调用submit()方法完成提交。

5.2K00

使用Vue.js和Axios第三方API获取数据 — SitePoint

转载声明 本文转载自使用Vue.js和Axios第三方API获取数据 — SitePoint 原文链接: www.sitepoint.com,本译文的链接地址:使用Vue.js和Axios第三方API...通常情况下,在构建 JavaScript 应用程序时,您希望远程源或API获取数据。我最近研究了一些公开的API,发现可以使用这些数据源完成很多很酷的东西。... API 获取数据使用 纽约时报API,您需要获得一个API密钥。...注意:您也可以轻松地使用Lodash等库进行分块 计算属性非常适合操纵数据。...结论 在本教程,我们已经学会了如何从头开始创建Vue.js项目,如何使用axiosAPI获取数据,以及如何处理响应、操作组件和计算属性数据

6.5K20

Vue表单输入绑定

由于表单控件有不同的类型,如文本输入框、复选框、单选按钮、选择框等,v-model指令在不同的表单控件上应用时也会有所差异。 2、单行文本输入框 <!...使用value属性设置了一个“Hello Vue.js”,用v-model指令绑定一个表达式message,对应的数据属性是message。   ...从上面渲染的结果可看出,文本输入显示的是数据属性message的值,而并没有看到元素的value属性的值。...7、值绑定   v-model正对不同的表单控件,绑定的值都有默认的约定。例如,单个复选框绑定的是布尔值,多个复选框绑定的是一个数组,选中的复选框value属性的值被保存到数组。   ...使用Vue.js,数据组织为对象的过程就变得异常简单了。

7.3K70

Excel实战技巧64: 工作簿获取数据(不使用VBA)

这是在研读《Escape From Excel Hell》时学到的技术,本工作簿或者其他工作簿获取所需要的数据,以便于作进一步的分析或者绘制Excel图表。 下图1所示是用于获取数据的工作表。...用于输入的有4个单元格(背景色为橙色),其中单元格A6输入数据(即要从哪里获取数据)所在的工作簿名称;单元格A7为源数据所在的工作表名称;单元格A8为源数据起始单元格的名称;单元格C5数据所在列号...单元格C6开始的列C的公式为: =OFFSET(INDIRECT(SourceDataLocation,A1Status),ROW()-ROW(C$5)-1,C$5-1) 获取相应的数据。...如果在图1所示的工作表单元格A6没有输入任何工作簿名(即留空),那么将获取当前工作簿数据工作表(如图2)的数据,如下图3所示。 ?...可以在完美Excel微信公众号底部发送消息: 获取数据 下载示例工作簿研究。

3K10

再推荐一款小众且好用的 Python 爬虫库 - MechanicalSoup

requests 库对网站进行了一次请求 2-3  网页元素及当前 URL 使用浏览器对象的「url」属性可以获取当前页面的 URL 地址;浏览器的「 page 」属性用于获取页面的所有网页元素内容...浏览器对象内置的 select_form(selector) 方法用于获取当前页面的 Form 表单元素 如果当前网页只有一个 Form 表单,则参数可以省略 # 获取当前网页某个表单元素 # 利用...() 至于表单内的 input 普通输入框、单选框 radio、复选框 checkbox # 1、普通输入框 # 通过input的name属性直接设置值,模拟输入 browser["norm_input...,搜索一次 使用浏览器对象获取网页表单元素,然后给表单的 input 输入框设置值,最后模拟表单提交 # 获取表单元素 browser.select_form() # 打印表单内所有元素信息...最后 文中结合微信文章搜索实例,使用 MechanicalSoup 完成了一次自动化及爬虫操作 相比 Selenium,最大的区别是 Selenium 可以和 JS 进行交互;而 MechanicalSoup

75120

JavaWeb day3 JavaScript入门

js alert("hello js"); 第二步:在页面引入外部的js文件 在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。...此案例我们需要看 复选框 元素对象有什么属性或者函数是来操作 复选框的选中状态。...如下面代码是按钮标签,在该标签上我们并没有使用 事件属性,绑定事件的操作需要在 js 代码实现 下面 js 代码是获取了 id='btn...,当我们点击 提交 按钮后,表单就会提交,此处默认使用的是 GET 提交方式,会将提交的数据拼接到 URL 后。...现需要通过 js 代码实现阻止表单提交的功能,js 代码实现如下: 获取 form 表单元素对象。 给 form 表单元素对象绑定 onsubmit 事件,并绑定匿名函数。

7.3K20

JavaWeb day3 JavsScript 入门

如定义名为 demo.js的文件 项目结构如下: 图片 demo.js 文件内容如下: alert("hello js"); 第二步:在页面引入外部的js文件 在页面使用 script 标签中使用 src...此案例我们需要看 复选框 元素对象有什么属性或者函数是来操作 复选框的选中状态。...如下面代码是按钮标签,在该标签上我们并没有使用 事件属性,绑定事件的操作需要在 js 代码实现 下面 js 代码是获取了 id...,当我们点击 提交 按钮后,表单就会提交,此处默认使用的是 GET 提交方式,会将提交的数据拼接到 URL 后。...现需要通过 js 代码实现阻止表单提交的功能,js 代码实现如下: 获取 form 表单元素对象。 给 form 表单元素对象绑定 onsubmit 事件,并绑定匿名函数。

7.5K10

翻译 | 玩转 React 表单 —— 受控组件详解

单选框 复选框 文本域 下拉选择框 同时也包含: 表单数据的清除和重置 表单数据的提交 表单校验 点击这里直接查看示例代码。...受控组件有两个特点: 受控组件提供方法,让我们在每次 onChange 事件发生时控制它们的数据,而不是一次性地获取表单数据(例如用户点提交按钮时)。...这个单向循环 —— (数据(1)子组件输入到(2)父组件的 state,接着(3)通过 props 回到子组件,就是 React.js 应用架构单向数据流的含义。...当用户提交表单时,该数组将会是用户的选择数据。 controlFunc:一个方法,用来处理 selectedOptions 数组 prop 添加或删除字符串的操作。...2. handleFormSubmit 为了提交表单数据,我们 state 抽取需要提交的属性值,创建了一个对象。接着使用 AJAX 库或技术将这些数据发送给 API(本文不包含此类内容)。

11.4K100

「jQuery」基础 - 02

(该方法也可以获取 H5 自定义属性) 1.1.3 数据缓存 data() data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除。...因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。 把全选按钮状态赋值给3小复选框就可以了。 当我们每次点击小的复选框按钮,就来判断。...jQuery的文本属性值常见操作有三种:html()、text()、val(),分别对应JS的 innerHTML 、innerText 和 value 属性。...语法1 注意:此方法用于遍历 jQuery 对象的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...,至于其他属性想要获取和设置,还要使用 css() 等方法配合。

2.8K20
领券