JS实现单选按钮和多选功能

最新推荐文章于 2024-01-29 09:48:24 发布
最新推荐文章于 2024-01-29 09:48:24 发布
阅读量5.4k 收藏 6
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Can1997/article/details/124183877
版权
本文详细介绍了如何使用JavaScript实现单选按钮和多选功能。通过CSS选择器获取DOM对象，如document.querySelector()和document.querySelectorAll()，并利用事件监听函数处理用户交互。在单选按钮部分，讲解了事件委托的概念，将单个按钮的点击事件委托给父元素，以减少事件监听。同时，还探讨了如何利用e.target获取触发事件的元素信息，包括标签名、ID、类名和内容，并结合getAttribute和indexOf方法进行属性值检查。
摘要由CSDN通过智能技术生成

HTML部分：

//容器
 <div class="container">

        <div class="all">
            全选<div class="checkbox"></div>
        </div>
        <div class="btns">
            <div class="checkbox"></div>
            <div class="checkbox"></div>
            <div class="checkbox"></div>
            <div class="checkbox"></div>
            <div class="checkbox"></div>
            <div class="checkbox"></div>
        </div>
    </div>

JS部分：

1：通过CSS选择器获取dom对象

知识点：CSS选择器

                document.querySelector() 返回匹配指定选择器的第一个元素

                document.querySelectorAll()返回文档中匹配指定 CSS 选择器的所有元素，返回 

最低0.47元/天 解锁文章
Can1997
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现多选与单选
h_tinkinginjava的博客
12-27 3973
这是实现的是只可以点击一个 $(function () { $('#conditions li:first-child a').addClass('active') $('#conditions li a').click(function () { $(this).addClass('active'); $(this).pare
js单选radio切换
08-11
js 单选 radio切换div
JavaScript十：表单二：单选按钮
小枯林的博客
12-28 6312
单选按钮的设置方法： ●单选按钮，可以利用name属性分组，同组内只能选中一个；name相同也方便后面通过name获得单选按钮所有选型的一个数组； ● <input type="radio" name="sex" value="1">男 value的值是传递到后台的值； 可以通过如下，获取value属性的值： ●checked="checked" ：默认选中的单选项： ● document.getElementsByName(name); ...
JS实现checkbox互斥(单选)功能示例
01-21
本文实例讲述了JS实现checkbox互斥(单选)功能。分享给大家供大家参考，具体如下： <html xmlns=http://www.w3.org/1999/xhtml > <head> <title>www.jb51.net CheckBox单选</title> [removed] function sel1(obj){ if(obj.checked){ //如果当前项被选中了 document.all.chk2.checked=false //则不能选择第二组 document.all.sel1.selectedIndex=4
WEB开发技能树-JavaScript-获取输入框/单选按钮/复选框的值
深度安全实验室
11-18 455
JS表单验证
2.js获取单选按钮(radio)的value值和点击事件
qq_44438941的博客
09-18 1966
日常总结
javascript基础学习系列三百一十一：单选按钮和复选框
最新发布
wanmeijuhao的博客
01-29 422
通过 designMode 属性，可以将这个空白文档变成可以编辑的，实际编辑的则是元素。在 遍历选择框的每个选项时，只要有选项被选中，就将其添加到结果字符串。如果不存在 value 属性，则应该以选项文本代替， 不过 value 属性为空字符串是完全有效的。设置为"on"时，整个文档 都会变成可以编辑的(显示插入光标)，从而可以像使用文字处理程序一样编辑文本，通过键盘将文本 标记为粗体、斜体，等等。(文件输 入字段在提交表单时包含文件的内容，但这些字段通常无法转换，因而也要排除在序列化之外。
js实现单选功能
Polaris_best的博客
03-10 1648
js实现单选功能
单选按钮、多选按钮用图片实现加样式
09-28
最后，在使用图片实现单选按钮和多选按钮的样式时，我们还应该考虑到图片的加载性能以及不同分辨率下的响应性问题。对于不同的设备和屏幕尺寸，可能需要通过媒体查询（Media Queries）来调整图片的大小或更换不同...
单选按钮和多选按钮
03-11
在计算机用户界面设计中，单选按钮（Radio Button）和多选按钮（Checkbox）是两种常见的交互元素，用于用户在一组选项中进行选择。本文将深入探讨这两种按钮的原理、功能以及如何在不同编程环境中实现它们的选中、...
vue实现自定义多选与单选的答题功能
08-27
"Vue实现自定义多选与单选的答题功能" 本文主要介绍了使用 Vue 实现自定义多选与单选的答题功能。该功能主要使用 Vue 组件中的 v-model 指令来实现双向绑定。下面将详细介绍该功能的实现过程和关键技术点。 单选...
vue实现单选和多选功能
12-03
在Vue.js中实现单选和多选功能是常见的前端交互需求，主要涉及到HTML结构、CSS样式以及Vue的数据绑定和事件处理。以下是一个简单的实例，详细解释如何使用Vue来完成这一功能。 首先，HTML部分用于创建单选按钮和复...
小程序实现单选多选功能
10-17
本文将详细介绍如何自定义样式来实现更具个性化的单选和多选功能。 ### 1. 模拟实现多选框 #### 1.1 结构与样式 在WXML文件中，我们创建一个`<view>`容器，包含一个`<checkbox-group>`和一系列的`<label>`。每个`...
用 JS（JavaScript ）实现多选、全选、反选
zzvar的博客
04-23 2565
JS小例题学习内容：需求总结： 学习内容： 需求 用 JavaScript 实现全选、反选、多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-
JS实现全选、全部选、反选、提交
dengfengling999的博客
01-14 2096
当点击全选的时候，4多选框全部选上、当点击全不选的时候，4个多选框都不选、当点击反选的时候，点击按钮以后选中的变成没选中，没选中变成选中、当点击提交按钮时，点击按钮以后，将所有选中的多选框value属性值弹出、 当全选/全部选按钮选择或取消下面4个多选框，全选或不选 当4个多选框全选后，全选/全部选按钮才被选中 在反选的时候也应判断4个是否为选中状态：若全选中则，全选/全部选按钮选中 <!DOCTYPE html> <html lang="en"> <head&gt
JS基础：使用原生js封装一个单选框
CHENBIN的博客
03-22 800
使用原生js封装一个单选框（导航栏）
javascript中addEventListener和onclick的区别
qq_42444795的博客
04-02 1738
先来看addEvenListener事件。 addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 <!DOCTYPE html> <html lang="zh"> <head> <meta char...
js 动态添加选项
m0_51402016的博客
11-07 295
首先我们应该了解相关知识点 Select 对象 Select 对象代表 HTML 表单中的一个下拉列表。 在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。 您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。 <!doctype html> <html> <head> <meta cha..
如何实现单选、多选按钮样式切换
05-16
单选、多选按钮样式切换可以通过CSS样式和JavaScript代码实现。 首先，我们可以为单选、多选按钮设置不同的class样式，例如单选按钮的class可以为"radio-btn"，多选按钮的class可以为"checkbox-btn"。 然后，在CSS样式中，我们可以为这些class设置不同的样式，例如单选按钮的样式可以设置为圆形或方形，多选按钮的样式可以设置为对勾或方形。 接着，我们可以使用JavaScript代码来实现按钮样式的切换。当单选按钮或多选按钮被选中时，我们可以通过JavaScript代码动态地将其class样式修改为选中状态的样式。 例如，当单选按钮被选中时，我们可以使用以下JavaScript代码： ``` document.querySelector('.radio-btn').classList.add('selected'); ``` 这将把单选按钮的class样式修改为"radio-btn selected"，其中"selected"是选中状态的样式。 同样地，当单选按钮或多选按钮被取消选中时，我们可以使用以下JavaScript代码： ``` document.querySelector('.radio-btn').classList.remove('selected'); ``` 这将把单选按钮的class样式修改为"radio-btn"，去除选中状态的样式。 通过使用CSS样式和JavaScript代码，我们可以轻松实现单选、多选按钮样式的切换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值