当前位置: 首页 > news >正文

js控制checkbox单选,获取checkbox的值,选中checkbox

声明:网上的资料杂七杂八的搞得我一个不熟悉前端的后端开发者弄起来贼难受,现在将实现了的做一个整合,希望能给你们带来点帮助(主要还是帮助我自己(●ˇ∀ˇ●),防止丢失)

html代码组件示例

<div style="width:200px;margin: 0 auto;"><div style="display: inline;"><input name="GMS" type="checkbox" value="0" onClick="chooseOne(this,'GMS');"><span style="margin-left: 10px;"></span></div><div style="display: inline;margin-left: 50px;"><input name="GMS" type="checkbox" value="1" onClick="chooseOne(this,'GMS');"><span style="margin-left: 10px;"></span></div>
</div>

多选框只能选一个

function chooseOne(cb,name){//先取得同name的chekcBox的集合物件var obj = document.getElementsByName(name);for (var i = 0; i< obj.length; i++){//判斷obj集合中的i元素是否為cb,若否則表示未被點選if (obj[i]!=cb) obj[i].checked = false;//若是 但原先未被勾選 則變成勾選;反之 則變為未勾選else  obj[i].checked = cb.checked;//若要至少勾選一個的話,則把上面那行else拿掉,換用下面那行// else obj[i].checked = true;}
}

获取多选框选择的值

function getCheckboxValue(name){var checkboxs = document.getElementsByName(name);var checkedValues = [];for (var i = 0;i<checkboxs.length;i++){if (checkboxs[i].checked){checkedValues.push(checkboxs[i].value);}}return checkedValues;
}

根据内容勾选多选框

function checkBoxChecked(name,value){var checkboxs = document.getElementsByName(name);for (var i =0;i<checkboxs.length;i++) {if (value === checkboxs[i].values){checkboxs[i].checked = true;}}
}

相关文章:

js控制checkbox单选,获取checkbox的值,选中checkbox

声明&#xff1a;网上的资料杂七杂八的搞得我一个不熟悉前端的后端开发者弄起来贼难受&#xff0c;现在将实现了的做一个整合&#xff0c;希望能给你们带来点帮助&#xff08;主要还是帮助我自己(●ˇ∀ˇ●)&#xff0c;防止丢失&#xff09; html代码组件示例 <div styl…...

MYSQL(事务+锁+MVCC+SQL执行流程)理解(2)

一)MYSQL中的锁(知识补充) 可以通过In_use字段来进行判断是否针对于表进行加了锁 1)对于undo log日志来说:新增类型的&#xff0c;在事务提交之后就可以清除掉了&#xff0c;修改类型的&#xff0c;事务提交之后不能立即清除掉这些日志会用于mvcc只有当没有事务用到该版本信息时…...

ubuntu tools

1 cloc calculate lines of your code sudo apt-get install cloccloc ./file...

LeetCode 155. 掷骰子等于目标和的方法数:动态规划

【LetMeFly】1155.掷骰子等于目标和的方法数&#xff1a;动态规划 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-dice-rolls-with-target-sum/ 这里有 n 个一样的骰子&#xff0c;每个骰子上都有 k 个面&#xff0c;分别标号为 1 到 k 。 给定三个整数 …...

PostgreSQL数据库从入门到精通系列之五:安装时序数据库TimescaleDB的详细步骤

PostgreSQL数据库从入门到精通系列之五:安装时序数据库TimescaleDB的详细步骤 一、下载PostgreSQL数据库yum源二、创建TimescaleDB存储库三、更新本地存储库列表四、安装TimescaleDB五、初始化PostgreSQL数据库六、启动Postgresql数据库服务七、以超级用户身份连接到PostgreSQ…...

软件测试(五)自动化 selenium

文章目录 自动化测试单元测试&#xff1a;单元测试&#xff1a;UI自动化 selenium工具定义特点&#xff1a;原理&#xff1a;seleniumjava环境搭建SeleniumAPI获取测试结果&#xff1a;添加等待浏览器操作键盘事件鼠标事件多层框架/窗口定位下拉框处理弹窗处理上传文件操作关闭…...

Android grantUriPermission的使用场景和方式

#grantUriPermission 作用 临时授权。 背景&#xff1a;FileProvider引入后应用之间想访问文件&#xff0c;都需要使用此接口。特别是两个独立的应用之间互通数据的时候。例如我们应用从图库获取文件的uri&#xff0c;显示在应用内的ImageView中。 #grantUriPermission 使用方…...

2023高频前端面试题-vue

1. 什么是 M V VM Model-View-ViewModel 模式 Model 层: 数据模型层 通过 Ajax、fetch 等 API 完成客户端和服务端业务模型的同步。 View 层: 视图层 作为视图模板存在&#xff0c;其实 View 就是⼀个动态模板。 ViewModel 层: 视图模型层 负责暴露数据给 View 层&…...

03初始Docker

一、初始Docker 1.什么是Docker 问题 ①大型项目组件复杂&#xff0c;运行环境复杂&#xff0c;部署时依赖复杂&#xff0c;出现兼容性问题。 ②开发&#xff0c;测试&#xff0c;生产环境有差异。不同的环境操作系统不同 解决 ①Docket将应用、依赖、函数库、配置一起打…...

1.1、Python基础-注释、变量声明及命名规则、数据类型

1.1、Python基础 Python基础1、注释2、变量3、数据类型 Python基础 1、注释 注释是给程序员看的&#xff0c;为了让程序员方便阅读代码&#xff0c;解释器会忽略注释。使用自己熟悉的语言&#xff0c;适当的对代 码进行注释说明是一种良好的编码习惯。 注释写法 #我是单行注…...

Python第三方库安装——使用vscode、pycharm安装Python第三方库

[TOC](Python第三方库安装——使用vscode、pycharm安装Python第三方库) # 前言 在这里介绍vscode、Pycharm安装python第三方库的方法。 操作系统&#xff1a;windows10 专业版 环境如下&#xff1a; Pycharm Comunity 2022.3 Visual Studio Code 2019 Python 3.8 pip&#xff…...

【vue】组件通选方式

父子传值 props $emit 这是最基本的父子组件通讯方式。通过 props 属性将数据从父组件传递给子组件&#xff0c;而子组件通过触发事件&#xff08;$emit&#xff09;将数据发送回父组件。 $children $parent 通过 $parent 属性可以访问父组件的实例&#xff0c;通过 $child…...

java 使用策略模式减少if

使用多态&#xff1a;通过使用面向对象的多态特性&#xff0c;可以将不同的逻辑封装到不同的类中&#xff0c;避免大量的 if 语句。使用继承和接口来定义通用的方法&#xff0c;并让具体的实现类实现这些方法。 使用设计模式&#xff1a;使用设计模式可以更好地组织和管理代码逻…...

第1章 引论

前言 这一章&#xff0c;阐述本书的目的&#xff0c;并简要复习离散数学以及程序设计的一些概念&#xff1a; 看到程序在较大输入情况下的运行性能与在适量输入情况下的运行性能具有同等重要性总结本书其余部分所需要的数学基础简要复习递归 1.1 本书讨论的内容 在许多问题当中…...

深入探究Linux文件:.sh、.swp文件的作用与意义 (linux .sh.swp)

近年来&#xff0c;Linux操作系统已经成为了许多服务器、云计算平台、嵌入式设备等领域的首选。Linux操作系统囊括了大量的命令和文件&#xff0c;而其中 .sh 和 .swp 文件是许多 Linux 用户较为熟悉的两种文件类型。那么&#xff0c;这两种文件的作用和意义是什么呢&#xff1…...

优雅的使用String字符串处理各种类型转换

文章目录 &#x1f31f; 优雅的使用String字符串处理各种类型转换&#x1f34a; 基本类型转字符串&#x1f34a; 字符串转基本类型&#x1f34a; 字符串与字符数组的转换&#x1f34a; 字符串与字节数组的转换&#x1f34a; 其他类型转字符串&#x1f34a; 总结 &#x1f4d5;我…...

Harmony 个人中心(页面交互、跳转、导航、容器组件)

个人中心 前言正文一、创建工程二、登录① 更换启动页面② 拓展修饰符③ 页面跳转④ 等待进度条 三、导航栏四、首页① 轮播图② 网格列表 五、我的① 带参数跳转 六、源码 前言 今天是1024&#xff0c;祝各位程序员们&#xff0c;钱多事少离家近&#xff0c;不秃也强bug黄。在…...

AlDente Pro for Mac: 掌控电池充电的终极解决方案

你是否曾经为了保护你的MacBook的电池&#xff0c;而苦恼于无法控制它的充电速度&#xff1f;AlDente Pro for Mac 是一款专为Mac用户设计的电池管理工具&#xff0c;它能帮助你解决这个问题。 AlDente Pro for Mac 是一款电池最大充电限制软件&#xff0c;它能够让你自由地设…...

tomcat的负载均衡、动静分离(nginx联动)

动静分离&#xff1a; 访问静态页面和动态页面分开 实现动态和静态页面负载均衡 实验5台虚拟机 一、动态负载均衡 3台虚拟机模拟&#xff1a; 代理服务器&#xff1a;30 tomcat动态页面&#xff1a;21、22 代理服务器&#xff1a; proxy_pass http://tomcat; proxy_set_h…...

基于单片机的温湿度检测及远程控制系统设计

目 录 引 言. 2 第一章 绪 论. 2 1.1 单片机简介 2 1.2 传感器简介 2 1.3 LCD液晶显示器简介 2 1.4 本设计的主要内容和目标 2 第二章 系统总体设计. 2 2.1 系统功能要求与技术指标 2 2.1.1 功能要求. 2 2.1.2 技术指标. 2 2.2 系统设计思路 2 2.3系统设计原则 2 2.4 系…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...