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

如何获取选中的单选按钮和剩余的td的值,但不包括未选中的单选按钮( tr)

获取选中的单选按钮和剩余的td的值,但不包括未选中的单选按钮(tr)的方法如下:

  1. 首先,使用JavaScript获取所有的单选按钮和对应的td元素。可以通过document.querySelectorAll方法选择所有的单选按钮和td元素,可以使用CSS选择器来指定元素的选择条件。
代码语言:txt
复制
var radioButtons = document.querySelectorAll('input[type="radio"]:checked');
var tdValues = document.querySelectorAll('td');
  1. 然后,遍历所有的单选按钮,获取选中的单选按钮的值以及对应的td的值。
代码语言:txt
复制
var selectedValues = [];
for (var i = 0; i < radioButtons.length; i++) {
  var radioButton = radioButtons[i];
  var tdValue = tdValues[i].textContent;
  selectedValues.push({
    radioButtonValue: radioButton.value,
    tdValue: tdValue
  });
}
  1. 最后,获取剩余的td的值,即未选中的单选按钮对应的td的值。
代码语言:txt
复制
var remainingValues = [];
for (var i = radioButtons.length; i < tdValues.length; i++) {
  var tdValue = tdValues[i].textContent;
  remainingValues.push(tdValue);
}

完整的代码示例:

代码语言:txt
复制
var radioButtons = document.querySelectorAll('input[type="radio"]:checked');
var tdValues = document.querySelectorAll('td');

var selectedValues = [];
for (var i = 0; i < radioButtons.length; i++) {
  var radioButton = radioButtons[i];
  var tdValue = tdValues[i].textContent;
  selectedValues.push({
    radioButtonValue: radioButton.value,
    tdValue: tdValue
  });
}

var remainingValues = [];
for (var i = radioButtons.length; i < tdValues.length; i++) {
  var tdValue = tdValues[i].textContent;
  remainingValues.push(tdValue);
}

console.log("选中的单选按钮和对应的td的值:", selectedValues);
console.log("剩余的td的值:", remainingValues);

这样,你就可以获取选中的单选按钮和剩余的td的值,但不包括未选中的单选按钮(tr)了。

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

相关·内容

Vue表单输入绑定

文章目录 1、简介 2、单行文本输入框 3、多行文本输入框 4、复选框 5、单选按钮 6、选择框 7、绑定 7.1 复选框 7.2 单选按钮 7.3 选择框选项 8、实例:用户注册 1、简介   ...,选中为true,选中为false;后者绑定是同一个数组,选中复选框将被保存到数组中。...当单选按钮选中时,v-model指令绑定数据属性会被设置为该单选按钮value。...7.1 复选框   在使用复选框时,在元素上可以使用两个特殊属性true-valuefalse-value来指定选中状态下选中状态下v-model绑定是什么。 <!...如下图 7.2 单选按钮   单选按钮选中时,v-model绑定数据属性默认被设置为该单选按钮value,可以使用v-bind将云南苏value属性再绑定到另一个数据属性上

7.3K70
  • 每周学点测试小知识-WebDriver页面操作

    它提供了backforward方法来模拟后退前进按钮,set_window_size方法来设置浏览器大小,maximize_window方法来最大化浏览器,refresh方法来刷新页面: from...beijing 单选框: 对于页面的单选框WebDriver提供了click函数进行选择,提供了...对于页面上复选框,与单选框类似,WebDriver提供了click函数进行选择,提供了is_selected函数来判断是否被选择: #定位第一个复选框第三个复选框 eleC0 = driver.find_element_by_id...eleS.select_by_index(0) #利用value选中接口测试 eleS.select_by_value("service") #利用text选中单元测试 eleS.select_by_visible_text...("单元测试") 表格: 对于表格WebDriver没有提供专门方法进行操作这里我定义了两个个函数来读取表格里数据: #获取表格中指定位置 def get_table_content(driver

    1.4K20

    与Ajax同样重要jQuery(2)

    option value="上海">上海 广州 <input type="button" value="<em>获取</em><em>选中</em><em>的</em><em>值</em>...:selected <em>选中</em> 表<em>单选中</em>元素 配合基本过滤选择器,缩小<em>选中</em><em>的</em>范围 4.jQuery<em>的</em>DOM操作 使用jQuery<em>的</em>九种选择器可以基本<em>选中</em>需要操作<em>的</em>对象,但是为了提高jQuery<em>的</em>查询效率,可以结合...() 读取文本内容 text(content) 设置文本内容 l 文本框、下拉列表框、<em>单选</em>框 <em>选中</em><em>的</em>元素<em>值</em> val() 读取元素value属性 val(content) 设置元素value属性 练习3:...² 传智播客 <em>获取</em>div中 html<em>和</em>text 对比 ² 使用val() 获得文本框、下拉框、<em>单选</em>框<em>选中</em><em>的</em>value ² 测试能否通过 val() 设置<em>单选</em>框、下拉框<em>的</em><em>选中</em>效果...⑦:jQuery复制<em>和</em>替换 l 复制节点 $(“p”).clone(); 返回节点克隆后<em>的</em>副本,<em>但不</em>会克隆原节点<em>的</em>事件 $(“p”).clone(true); 克隆节点,保留原有事件 l 替换节点 $(

    6.2K50

    Web前端基础(07)

    $(":radio") 匹配所有单选 $(":checkbox") 匹配所有多选 $(":checked") 匹配所有选中单选/多选/下拉选 $(“input:checked”) 匹配所有选中单选多选...等效innerText 获取元素文本 元素对象.text(); 修改元素文本 元素对象.text(“xxx”); 获取修改元素html内容 等效innerHTML 获取元素html 元素对象.html....css(“样式名”,“”); 批量修改元素样式 元素对象.css({“样式名1”:“”,“样式名2”:“”}); 获取修改元素属性 获取元素属性 元素对象.attr(“属性名”); 修改元素属性...deltd(删除td) var tr = $(""); var nametd = $(""); var agetd = $(""); //最后给删除按钮添加点击事件,点击时候删除按钮对应这一行.

    5K20

    HTML第二天

    tr tr— 表格每行,可用于包囊 td td— 表格单元格,可用于包囊内容 标签嵌套关系:table > tr > td 我是表格基本标签...:text→文本框 单选框:**** 有相同 name 属性单选框为一组,一组中同时只能有一个被选中 checked...–默认选中 复选框: type=”checkbox” –在网页中是多选按钮 checked 是默认选中,不要跟 checkbox 弄混了 上传文件按钮:**<type...标签把内容(如:文本)包裹起来 2、在表单标签上添加 id 属性 3、在 label 标签 for 属性中设置对应 id 属性 没有语义布局标签 - div span 实际开发网页时会大量频繁使用到...: 空格: : <小于号:<: >大于号:>: ---- type属性: 说明 type属性 常用属性 文本框 text placeholder 单选框 password placeholder

    3K20

    前端学习(2)~html标签讲解(二)

    一个表格是由每行组成,每行是由每个单元格组成。 所以我们要记住,一个表格是由行组成(行是由列组成),而不是由行列组成。...属性可以是: text(默认) password:密码类型 radio:单选按钮,名字相同按钮作为一组进行单选单选按钮,天生是不能互斥,如果想互斥,必须要有相同name属性。...checked:将单选按钮或多选按钮默认处于选中状态。当标签type="radio"时,可以用这个属性。属性也是checked,可以省略。...reset:重置按钮,清空当前表单内容,并设置为最初默认 image:图片按钮提交按钮功能完全一致,只不过图片按钮可以显示图片。 file:文件选择框。...,我们只有点击那个单选框(小圆圈)才可以选中,点击“男”、“女”这两个文字时是无法选中;于是,label标签派上了用场。

    2.4K10

    【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)

    标签:表示表格一行。 标签:表示一个单元格。 标签:表示表头单元格。会居中加粗。 标签:表格头部区域(注意标签区分,范围比标签要大)。...1.3.2 -> input标签 各种输入控件,单行文本框,按钮单选框,复选框。...尤其是对于单选按钮,具有相同name才能多选一。 value:标签中默认。 checked:默认被选中。(用于单选按钮多选按钮)。 maxlength:设定最大长度。 1....单选框 性别: 男 女 注意: 单选框之间必须具备相同...点击标签也能选中对应单选/复选框,能够提升用户体验。 for属性:指定当前标签哪个相同标签标签对应。(此时点击才是有用)。

    11910

    html 下

    表格现在还是较为常用一种标签,但不是用来布局,常见显示、展示表格式数据。 因为它可以让数据显示非常规整,可读性非常好。...4. checked属性 表示默认选中状态。 较常见于 单选按钮复选按钮。...男 这个单选按钮 5. input 属性小结 属性 说明 作用 type 表单类型 用来指定不同控件类型 value 表单 表单里面默认显示文本 name 表单名字 页面中表单很多,name主要作用就是用于区别不同表单...checked 默认选中 表示那个单选或者复选按钮一开始就被选中了 2.2 label标签(理解) 目标: label标签主要目的是为了提高用户体验。 为用户提高最优秀服务。...作用: 用于绑定一个表单元素, 当点击label标签时候, 被绑定表单元素就会获得输入焦点。 如何绑定元素呢? 第一种用法就是用label直接包括input表单。

    2.8K31

    从零开始学 Web 之 HTML(三)表单

    表单域 上面提示信息表单控件等所在区域 。...name:输入框名字 maxlength:限定输入文本长度 readonly:文本框只读 disabled:文本框未激活 value:输入框中默认内容 placeholder:引导文字,当文本框无文字并且未获取鼠标焦点时显示引导文字...,当获取焦点或者输入文字时隐藏引导文字。...PS:当有多个单选框是如何设置只能有一个被选中? 只有将 name 设置相同时候,才能实现单选效果。...2、有了良好结构语义你网页内容自然容易被搜索引擎抓取。 3、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)。 4、便于团队开发维护。 那怎么做?

    2.9K30

    17.HTML

    placeholder 框内预置内容(灰色),写上内容时才消失  radio 单选按钮。...属性:   name(将name设置为相同,才表示一组数据,才能实现单选功能)   value(必须要写,提交到服务器key,实际开发过程中value一般是编号)    checked(是否被选中状态...name(名字一定要一样一样,才表示是一组数据,添加到同一value列表提交到服务器)   value(必须要写,提交到服务器key,实际开发过程中value一般是编号)   checked(是否被选中状态...reset 重置按钮。清空表单输入,恢复到表单默认状态。 button  普通按钮。一般结合javascript使用。  文本域标签。...name:表单提交项key   size:选项个数   multiple:多选    下拉选中每一项   value(表单提交项)   selected(selected下拉选默认被选中

    3.6K71

    Html&Css 基础总结(基础好了才是最能打的)二

    标签名称是 table, table嵌套 tr(t-row) tr嵌套th(t-head)td(t-body) 在一般使用中, 第一行是th表头, 然后再来个tr, 就可以写具体数据了, 我是表头 我是表内容 我是表头 我是表内容 一般配合js使用for...同组只能选中一个(单选) 还有个属性checked,默认选中, 属性名属性一样,可以简写; <input type= "radio" name="xingbie" checked="checked...; <em>按钮</em>标签 比较常见<em>的</em>控件啦, button, 双标签, 我是<em>按钮</em> type属性<em>值</em>: submit。...提交,点击后提交数据到后台(默认) reset 重置, 恢复各项数据; button, 普通<em>按钮</em>,没有默认功能, 一般配合js使用 reset重置时,需要外部<em>包括</em>form才可以进行表单数据<em>的</em>清除

    10110

    有它我不慌

    > 第一行单元格1 第一行单元格2 第二行单元格1</...:设置男name属性统一,就可以实现真正单选按钮 ps:对于复选按钮吃饭,睡觉,打豆豆,也要设置统一name属性,尽管之前效果是一样 修改后: 用户名:...-- 普通按钮: --> 这个阶段点击后,啥也做不了,一般后面结合JS来实现获取验证码功能. 4.file属性 按钮作用:上传文件...属性 属性类别1:文本密码 属性类别2:单选复选框 属性类别3:提交,重置,获取验证码,上传文件按钮 b.name属性:作用区分不同表单元素,单选复选必须做到统一,额外对于radio...selected,当前项即为默认选中状态 这是不是和我们之前在input标签type属性为radio或者checkbox时[单选或复选框],在input标签中添加checked属性[属性]即可设置为默认选中

    1.4K20

    Html基础知识点整理

    重置按钮----reset 普通按钮 隐藏域 只读属性设置不可用属性 选择框标签 文本域标签 form表单属性 ---- 基本标签 字体标签 代码演示: <font color="blue"...对应单选框来说,在同一组内,具有单选效果。 单选如何分组呢? name属性,name相同为一组 提交按钮: 注意: ?...后面是参数列表 如果单选框里面不指定value属性,那么提交给数据库里面的数据显示都为on,无法区分选择性别是什么 这里参数列表里面没有用户名密码,说明用户名密码没有被提交,之所以没有被提交...,是因为我们没有设置其参数名,即name属性 我们也可以直接给用户名密码提供一个初始,通过设置其value属性来完成 单选框默认勾选某个选项 完整代码: <!...因为我们需要给他们分组,即设置其name属性 同时,我们还需要像单选框那样,设置其value属性,不然提交上去都是on 默认选中,checked ---- 附件框----用于文件上传 ----

    99720

    HTML基本标签使用详解

    合并单元格:向下向右合并单元格,最重要是找准要合并单元格,然后删除掉多余单元格 跨行合并: rowspan="n" 跨列合并: colspan="n" 七、列表标签 无序列表:ul...8.1、input 标签 各种输入控件, 包括单行文本框(text), 按钮(button), 单选框(radio), 复选框(checkbox)。...尤其是对于 单选按钮, 具有相同 name 才能多选一。 value: input 中默认。 checked: 默认被选中. (用于单选按钮多选按钮)。...重点说一下单选提交按钮、清空按钮单选name必须一样才能达到单选效果。...九、操作实例: 1、绘制行星表格图 以下代码用到图片提供,大家可自行找图片替代。 <!

    9310
    领券