javascript如何获取checkbox复选框选中项的值
时间:2017-03-21
本文章向大家介绍javascript如何获取checkbox选中项的值,主要思路是获取所有的checkbox,然后遍历哪些checkbox被选中,最后使用checkbox的value属性获取选中checkbox的值,需要的朋友可以参考一下。
实例一:
<script>
function checkbox()
{
var str=document.getElementsByName("box");
var objarray=str.length;
var chestr="";
for (i=0;i<objarray;i++)
{
if(str[i].checked == true)
{
chestr+=str[i].value+",";
}
}
if(chestr == "")
{
alert("请先选择一个爱好~!");
}
else
{
alert("您先择的是:"+chestr);
}
}
</script>
选择您的爱好:
<input type="checkbox" name="box" id="box1" value="跳水" />跳水
<input type="checkbox" name="box" id="box2" value="跑步" />跑步
<input type="checkbox" name="box" id="box3" value="听音乐" />听音乐
<input type="button" name="button" id="button" onclick="checkbox()" value="提交" />
分析:
- 使用document.getElementsByName("box");获取HTML文档中所有的checkbox,获取的结果为数组
- 遍历数组,数组中的每个元素为一个checkbox复选框,通过判断checkbox的checked属性来判断checkbox是否被选中,如果checked属性为true,表示选中,此时我们可以使用checkbox的value属性来获取checkbox选中项的值。
再看一个实例:
<input type="checkbox" name="test" value="1"/><span>1</span>
<input type="checkbox" name="test" value="2"/><span>2</span>
<input type="checkbox" name="test" value="3"/><span>3</span>
<input type="checkbox" name="test" value="4"/><span>4</span>
<input type="checkbox" name="test" value="5"/><span>5</span>
<input type='button' value='提交' onclick="fun()"/>
<script>
function fun(){
obj = document.getElementsByName("test");
check_val = [];
for(k in obj){
if(obj[k].checked)
check_val.push(obj[k].value);
}
alert(check_val);
}
</script>
实现原理和实例一是一样的。
js获取checkbox中所有选中值及input后面所跟的文本.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js</title>
</head>
<script language="javascript">
function aa(){
var r=document.getElementsByName("r");
for(var i=0;i<r.length;i++){
if(r[i].checked){
alert(r[i].value+","+r[i].nextSibling.nodeValue);
}
}
}
</script>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="r" value="1">a<br>
<input type="checkbox" name="r" value="2">b<br>
<input type="checkbox" name="r" value="3">c<br>
<input type="checkbox" name="r" value="4">d<br>
<input type="checkbox" name="r" value="5">e<br>
<input type="checkbox" name="r" value="6">f<br>
<input type="checkbox" name="r" value="7">g<br>
<input type="checkbox" name="r" value="8">h<br>
<input type="checkbox" name="r" value="9">i<br>
<input type="checkbox" name="r" value="10">j<br>
<br>
<input type="button" onclick="aa()" value="button">
</form>
</body>
</html>
注意:使用obj.extSibling.nodeValue获取checkbox选中项的文本。
- C# Enum设计和使用的相关技巧
- 小程序如何利用更低成本获得高流量?
- 使用System.Net.Mail通过gmail发送电子邮件
- 删除 WordPress 导航菜单的多余 CSS 选择器(id或class)
- es6 对象的扩展
- 自定义WordPress 标签云小工具相关参数
- 检查.NET程序平台目标(Platform Target)工具CorFlags
- 哪些行业最适合抢驻小程序?
- WordPress 一键关闭/禁止页面评论功能
- 在一个.net sln中包含多个project,project引用同一个dll导致的错误
- Windows下安装MariaDB
- Quartz.net官方开发指南 第一课:使用Quartz.net
- Quartz.net官方开发指南 第二课:Jobs And Triggers
- 为你的WordPress 主题添加结构化数据/丰富文本摘要,高亮搜索结果(上)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS 8 如何安装 htop
- Discourse 重复安装过程中的密钥签发问题
- Appium之「元素定位和UiAutomator表达式」
- 机器人软件开发:机器人开源库安装
- 2020-10-05:如何求模平方根?
- leetcode栈之比较含退格的字符串
- Discourse 如何不使用 Let’s Encrypt 而使用 CA 签名的密钥进行安装
- 3分钟短文:Laravel slug,让你的url地址更“好记”
- Qt音视频开发28-Onvif信息获取
- CentOS 8 启用 NTP 服务
- Discourse 如何使用命令行方式进行恢复
- CentOS 8 Apache 启用 SSL
- leetcode栈之二叉树的前序遍历
- 前端学数据结构与算法(七): 从零实现优先队列-堆及其应用
- 前端学数据结构与算法(六):二叉树的四种遍历方式及其应用