当前位置: 首页 > 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;}}
}
http://www.lryc.cn/news/205173.html

相关文章:

  • MYSQL(事务+锁+MVCC+SQL执行流程)理解(2)
  • ubuntu tools
  • LeetCode 155. 掷骰子等于目标和的方法数:动态规划
  • PostgreSQL数据库从入门到精通系列之五:安装时序数据库TimescaleDB的详细步骤
  • 软件测试(五)自动化 selenium
  • Android grantUriPermission的使用场景和方式
  • 2023高频前端面试题-vue
  • 03初始Docker
  • 1.1、Python基础-注释、变量声明及命名规则、数据类型
  • Python第三方库安装——使用vscode、pycharm安装Python第三方库
  • 【vue】组件通选方式
  • java 使用策略模式减少if
  • 第1章 引论
  • 深入探究Linux文件:.sh、.swp文件的作用与意义 (linux .sh.swp)
  • 优雅的使用String字符串处理各种类型转换
  • Harmony 个人中心(页面交互、跳转、导航、容器组件)
  • AlDente Pro for Mac: 掌控电池充电的终极解决方案
  • tomcat的负载均衡、动静分离(nginx联动)
  • 基于单片机的温湿度检测及远程控制系统设计
  • 前后端交互系统:在Node.js中运行JavaScript
  • Maven学习
  • 《动手学深度学习 Pytorch版》 10.2 注意力汇聚:Nadaraya-Watson 核回归
  • 测试C#调用Windows Media Player组件
  • 面试经典150题——Day20
  • [SQL开发笔记]AND OR运算符复杂表达式开发实例
  • 如何将本地 PDF 文件进行翻译
  • Node.js的readline模块 命令行交互的模块
  • 前沿重器[36] | ACL23-基于检索的大语言模型-报告阅读
  • 2023秋招笔试算法Python3题解
  • uniapp--点击上传图片到oss再保存数据给后端接口