开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js获取checkbox选中的文本

在JavaScript中，获取复选框（checkbox）选中的文本通常涉及到以下几个步骤：

基础概念

复选框（Checkbox）：HTML中的<input type="checkbox">元素，允许用户选择多个选项。
事件监听：使用JavaScript监听复选框的状态变化。
DOM操作：通过JavaScript操作DOM元素来获取或设置元素的属性和内容。

相关优势

用户友好：允许用户选择多个选项，提供了灵活的选择方式。
易于实现：通过简单的HTML和JavaScript代码即可实现功能。
灵活性高：可以结合其他表单元素和JavaScript逻辑实现复杂的交互效果。

类型与应用场景

静态复选框：固定选项的复选框，适用于用户选择兴趣、权限等。
动态复选框：通过JavaScript动态生成或修改选项，适用于动态数据展示和选择。

示例代码

以下是一个简单的示例，展示如何获取选中的复选框对应的文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Example</title>
</head>
<body>
    <form id="myForm">
        <label><input type="checkbox" name="option" value="Option 1"> Option 1</label><br>
        <label><input type="checkbox" name="option" value="Option 2"> Option 2</label><br>
        <label><input type="checkbox" name="option" value="Option 3"> Option 3</label><br>
        <button type="button" onclick="getSelectedText()">Get Selected Text</button>
    </form>

    <script>
        function getSelectedText() {
            const checkboxes = document.querySelectorAll('input[name="option"]:checked');
            let selectedText = [];
            checkboxes.forEach(checkbox => {
                selectedText.push(checkbox.nextSibling.textContent.trim());
            });
            alert('Selected Texts: ' + selectedText.join(', '));
        }
    </script>
</body>
</html>

解释

HTML部分：
- 创建了一个包含三个复选框的表单。
- 每个复选框都有一个对应的标签（<label>），显示选项文本。

JavaScript部分：
- getSelectedText函数通过querySelectorAll选择所有选中的复选框。
- 遍历选中的复选框，获取每个复选框后面的文本节点（即选项文本），并将其存储在数组中。
- 最后，通过alert显示选中的文本。

可能遇到的问题及解决方法

获取不到选中文本：
- 确保复选框和文本标签正确关联（使用<label>元素）。
- 检查JavaScript代码是否正确选择和处理DOM元素。
动态生成的复选框：
- 如果复选框是动态生成的，确保在生成后绑定事件监听器。
- 使用事件委托（Event Delegation）处理动态元素的点击事件。

通过以上步骤和示例代码，可以有效地获取复选框选中的文本，并解决常见的实现问题。

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

有帮助

没帮助

相关·内容

jquery获取checkbox是否选中

在使用jquery的过程中，发现了一个比较特别的属性，那就是 input标签的 checkbox的是否选中状态在jquery 1.6 + 以后，checkbox的选中状态的获取不在是直接$(XXX)...name|properties|key,value|fn) 具体事例： if($('input[name="iscknotrans"]').prop("checked")){ alert("选中了..."); }else{ alert("没选中"); }

2.8K3 0

获取checkbox所选中的值

checkbox" value="222" /> //获取所有name为demand的对象 var obj = document.getElementsByName...for (var i = 0; i < obj.length; i++) { if (obj[i].checked) { demand += obj[i].value + ',';//如果选中

3.5K2 0

checkbox选中和不选中的值_设置checkbox选中状态

大家好，又见面了，我是你们的朋友全栈君。...“#ck”).attr(“checked”,true)//选中 // $(“#ck”).attr(“checked”,false)//未选中 2.获取选中的状态：var status = $(“#hasApply...”).prop(“checked”); 3.判断checkbox是否选中的3种方法方法一： if ((“#checkbox-id”).get(0).checked) { // do something...’)) { // do something } 注意：在jQuery1.6版本之后，这个方法返回的是undefined；取复选框有没有被选中，要用prop，返回true/false if((‘#checkbox-id...’).prop(‘checked’)) { 　　//do something } 获取选择 radio 的值发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/124822

7.8K2 0

js 实现文本选中与复制

DOCTYPE html> JS选中文字复制文本内容我是被复制的内容我是被复制的内容...if (copysuccess) { alert('已成功复制') } } 注意：这个方法只能是纯文本元素...('textarea'); document.body.appendChild(textarea); // 赋值 textarea.value = '复制的文本内容...textarea); } 参考文档：https://www.jianbaizhan.com/article/618 https://www.zhangxinxu.com/wordpress/2021/10/js-copy-paste-clipboard

8.9K3 0

js：如何获取select选中的值

我想获取select选中的value，或者text，或者…… 比如这个：的是你所选中项的index 3:拿到选中项options的value： myselect.options[index].value; 4:拿到选中项options...的text： myselect.options[index].text; 5:拿到选中项的其他值，比如这里的url： myselect.options[index].getAttribute(‘url’...); 二：jQuery方法 1:var options=$(“#select option:selected”); //获取选中的项 2:alert(options.val()); //拿到选中项的值...3:alert(options.text()); //拿到选中项的文本 4:alert(options.attr(‘url’)); //拿到选中项的url值版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人

26.8K3 0

jquery关于checkbox选中和不选中的问题

大家好，又见面了，我是你们的朋友全栈君。...近期由于项目需要，用到了列表checkbox，在点击被考核人的一行时，check不选中，然后解决方法是 //点击被考核人列表 $("table.be_assess-employee-container...$(this).addClass("on"); $("table.be_assess-employee-container tr.content td input[type=checkbox...]").prop("checked", false); $(this).find("td:eq(0) input[type=checkbox]").prop("checked

1.9K2 0

input checkbox复选框点击获取当前选中状态jquery

is判断 // let checkStatus=$(id).is(':checked'); // console.log(checkStatus) //用prop方法（用attr获取不到...） let checkStatus=$(id).prop("checked"); console.log(checkStatus) } html: checkbox..." value="" id="selectManyProject" onclick="checkAll('#selectManyProject')"/> 这里注意传入id的时候记得一定要加#，或者在jquery

2.4K3 0

关于复选框checkbox没有选中不能获取值的问题

大家应该在获取checkbox值的时候发现没有选中是没有值的,value这个值选中才会有,那该怎么让它不选中也获取呢?...很简单,加个隐藏的input,通过点击复选框,用js事件改input的值大概就是这样,最后贴上一段代码 $(function(){ $(".attr_if_check").on('click'

2.3K1 0

jQueryJS判断设置checkbox的选中状态

项目中经常遇到 checked 选中的问题，可以通过 JS 或者 jQuery 实现。...1、JS 方法判断选中： var check = document.getElementsByTagName('input')[0]; console.log(check.checked);//false...若要在HTML中设置 checkbox 为选中状态则可以这样设置： checkbox" name="box" checked="true"> 设置/取消选中： // 设置元素为选中状态...判断 checkbox 是否被选中用的是 attr() 方法，HTML代码与上面相同，只放 jQuery 代码： console.log($("input[type='checkbox']").attr...要特别注意不要漏巧":disabled"中的"":" 设置选中： $("input[name='checkbox']").attr("checked",true); 取消选中： $("input[name

18.8K1 0

JQuery 遍历被选中的checkbox元素

https://blog.csdn.net/u011415782/article/details/78819667 需求在一个简单的Html页面中，我需要读取所有被选中的checkbox..." addr_id="{$vo.address_id}"> checkbox" class="cb_addr" id="cb_{$vo.address_id...Js 代码编写/实现 var allWeight = 0; //TODO 取出所有被选中的 checkbox 元素 var cb_checked = $('.cb_addr:checked'); var...cblen = cb_checked.length; if (cblen == 0){ //如果没有选中的元素 alert('请选择要分配的地址'); }else { //TODO...附录参考文章： jquery选择器之获取父级元素、同级元素、子元素

2.2K3 0

JQuery 获取选中checkbox多选框的value，合并成数组传给后台

需求： JQuery 获取选中多选框的value，合并成数组传给后台在ajax请求的时候，需要给后端传一个参数 deviceId，这个 deviceId是一个list集合，也就是一个数组，需要把选中的几个数值放在这个数组里面...简单的例子: JQuery 获取选中多选框的value..."> js/bootstrap.min.js"...checked").each(function() { arr.push($(this).val()); //向数组中添加元素 }); //获取界面复选框的所有值

3.2K3 0

使用js获取选中的dom元素并改变选中（有序dom）的状态

-- checkbox v-model="">开启双向checkbox> -->

checkbox v-for="(item, i) in checkArr..." class="m-4" :data-index="i" @mouseover.native="mouseoverItem" >checkbox...> checkbox-group> const checkArr = new Array(200).fill(null)....; } .el-checkbox__label::selection { background: #fff; color: #206ef7; }

2722 0

input标签checkbox选中触发事件的方法

打开页面时，根据后端返回的的值isRequired，设置页面的checkbox标签的勾选状态，并给隐藏的text标签的value赋值，以便于在提交页面时把isRequired再返回给后端 2....切换checkbox标签的勾选状态时，修改隐藏的text标签的value的值，勾选是1，取消勾选是0 html代码： checkbox...input type="text" name="isRequired" id="isRequiredText" style ="display: none;" value="" > js...).prop('checked', 0); $("#isRequiredText").val("0"); } } Jetbrains全家桶1年46，售后保障稳定 //切换checkbox...标签勾选状态时的相应方法 function checkboxOnclick(checkbox) { if (checkbox.checked == true) { $("#isRequiredText

4.7K1 0

WdatePicker 如何在js里获取到选中的值

WdatePicker 如何在js里获取到选中的值一：插件使用定义方法：代码如下：效果图：二将选中的值...(时间)赋值给定义的input框本身,实现方法是自定义一个函数，在选中时触发。 ...function pickedFunc() { $("#executeDateTime").val($dp.cal.getDateStr()); } 三：换取选中的时间： $("

11.5K1 0

jQuery限制复选框checkbox的选中次数

checkbox" name="checkbox" value="A"> checkbox" name="checkbox" value="B"> <div...(function () { //checkbox的input标签点击事件 $('input[type=checkbox]').click(function...() { //设置name为checkbox的input标签的属性为true,表示不可选 $("input[name='checkbox']")....attr('disabled', true); //选中个数大于2 if ($("input[name='checkbox']:checked

2.3K2 0

JS获取富文本(HTML)的摘要

前言在一些文章类程序中，我们直接对文章内容检索的话，数据量大，速度较慢，我们可以在保存的时候获取文章的摘要，方便后续检索。根据字数获取这种方式可以作为文章概要。...parentElement){ return ""; } // 获取要移除的标签名 const removedTagNames = ['pre','figure'...]; // 例如要移除 div 标签 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的...; // 例如要移除包含的样式 // 获取父级元素下的所有子节点 const childNodes = parentElement.childNodes; // 创建一个新的 DocumentFragment...let textContent = showDom.innerText; // 获取文本中出现次数超过2次的高频词 const highFrequencyWords = getHighFrequencyWords

3801 0

JavaScript | 选中并获取多行文本框内容的效果

HTML5学堂（码匠）：文本操作一直是开发中不可避免的存在，用户选中的文本内容，是否可以进行获取并处理到需要的位置当中？如果可以，这样的操作到底需要使用到哪些方法呢？本文主要内容 1....如上，主要实现的是用户自定义选择多行文本框中的任何内容，然后把获取的内容放到按钮下的文本中作为内容的存放，最后通过点击按钮实现内容的设置，从而把用户需要的信息从大量的内容文本中获取出来。...涉及的基本属性知识 2.1 innerHTML属性 innerHTML是一个在JS中拥有双向功能的属性，它可以获取对象的内容，同时又可以向对象插入内容。...用户和JS都可以创建选中区，用户创建选中区的办法是选中文档的某一部分；JS创建选中区是在文本域等位置调用selection对象。...上文中主要就是为大家讲解Selection对象对于页面文本内容的选中操作。

5.1K6 0

gitlab 删除仓库_获取下拉框选中的文本值

方法一：使用git命令来删除分支 1、进入相应的仓库，然后使用 git branch -a 命令查看该仓库所有的分支 2、删除相应的分支，这里以删除 “Redefine-PinDir-for-MoroccoA...” 为例，执行 git push origin –delete Redefine-PinDir-for-MoroccoA 命令就可以删除远程仓库的 “Redefine-PinDir-for-MoroccoA...git branch -a 命令查看该仓库所有的分支，发现 “Redefine-PinDir-for-MoroccoA” 已经没有了方法二：直接在gitlab上删除分支 1、点击进入需要删除分支的那个仓库...2、点击“Branches” ，就可以看到该仓库的所有分支了，然后再点击相应分支最右边红色的“垃圾桶”图标就可以删除该分支了版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

2.1K2 0

jQuery判断checkbox是否选中的3种方法

网上大多数文章都提供的方法都是无效的,害死个人,本文中的方法小编亲测试有效,建议使用方法一、二：方法一（建议）： if ($("#checkbox-id").get(0).checked) {...// do something } 感谢豆瓣绿补充： if ($("#checkbox-id")[0].checked) { // do something } 方法二（建议）： if($('...#checkbox-id').is(':checked')) { // do something } 方法三（可能无效）： if ($('#checkbox-id').attr('checked...')) { // do something } 方法四： if ($('#checkbox-id').prop('checked')) { // do something } 了解attr...和prop的区别

1.5K7 0

Android CheckBox修改选中颜色并去除选中时的水波纹效果

前言都知道Android原生的控件颜色比较辣眼睛，所以实际开发中都会有改动，而选中框是在实际开发中常用的，比如同意这个协议就勾选上。...先写一个控件 CheckBox android:text="同意服务协议" android:layout_width="wrap_content" android...ADB6AF #F7F13D 然后在布局文件中应用这个样式： CheckBox...这种修改方式是不同于通过background的来切换的，我保留了这个控件选中和取消选中的动画效果，只修改了选中前后的颜色，这种方式是比较好的，android:theme="@style/MyCheckBox...去除选中时的水波纹效果其实一行代码就搞定了，就是把背景值为透明即可，@android:color/transparent 修改布局文件： CheckBox android:layout_width

3.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭