首页 > 编程语言 >JavaScript操作checkbox的方式

JavaScript操作checkbox的方式

时间:2023-11-02 11:32:29浏览次数:35  
标签:index checkbox JavaScript value var 操作 options myselect

JavaScript操作checkbox的方式和操作radio的方式相似,都是利用元素项的checked属性来完成。先获取checkbox元素集合,遍历集合,对集合中的每一项做操作。

 

<body>
	<p>
	<label for="hobby">Hobby:  
	<input type="checkbox" name="hobby" value="reading" />reading  
	<input type="checkbox" name="hobby" value="climbing" />climbing  
	<input type="button" value="Get Value" onclick="getValue()" />
	</label>
	</p>
</body>
reading
climbing

 

 

function getValue(){
	var hobbies = document.getElementsByName("hobby");
	var value;
	for (i=0; i<hobbies.length; i++){
		if (hobbies[i].checked){
			if (!value){
				value = hobbies[i].value;
			} else {
				value += "," + hobbies[i].value;
			}
		}
	}
	
	alert(value == undefined ? '' : value);
}

 

javascript 中 select 下拉框

 

<select id="test">

<option>one</option>


<option>two</option>


<option>three</option>

</select>

 1 拿到select对象: var  myselect=document.getElementById("test");

// selectedIndex代表的是你所选中项的index

 3 拿到选中项options的value:  myselect.options[index].value;

 4 拿到选中项options的text:  myselect.options[index].text;

 



标签:index,checkbox,JavaScript,value,var,操作,options,myselect
From: https://blog.51cto.com/emanlee/8143308

相关文章

  • JavaScript 保存文件
       <scriptsrc="http://cdn.jsdelivr.net/g/filesaver.js"></script><script>functionSaveAsFile(t,f,m){try{varb=newBlob([t],{type:m});saveAs(b,f);}catch(......
  • axum 操作 Postgres 数据库
    PostgreSQL是一款天然支持异步操作的高性能开源关系型数据库。本章将讨论如何在axum中使用PostgreSQL。包括:数据的增加、修改、删除、查找以及开始事务保证业务的原子性。如果你对PostgreSQL不是很了解,可以通过PostgreSQL轻松学网站进行学习。ElephantSQL提供了免费的Po......
  • axum 操作 redis
    通过 redis-rs 这个crate,可以很方便的操作redis。它提供了同步和异步两种连接,由于我们要集成到axum中,所以这里使用异步连接。本章将展示如何获取redis异步连接、如何将字符串保存到redis、如何获取到保存在redis里的字符串以及如何通过redis保存和读取自定义结构体。......
  • overflow溢出属性 前端基础之JavaScript
    今日内容详细overflow溢出属性visible 默认值。内容不会被修剪,会呈现在元素框之外。hidden 内容会被修剪,并且其余内容是不可见的。scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。●over......
  • 刘铭诚:11.1-2美盘黄金行情涨跌走势解析及期货原油价格操作建议
    黄金行情走势分析——白盘波动不大,午间下跌预期给到1975一线入场多单,目前到达1983一线,短线拿到8个点。整体来看今日的波动振幅还没有打开,但是从相关美元指数来看比较利好美元,目前更是来到106.85.晚间有望向107水平关口发起冲锋,届时黄金还会承受打击下跌。昨日黄金受到多次......
  • Linux操作系统
    一.什么是LinuxLinux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。二.Linux的特点(1)Linux是一款免费的操作系统,用户可以通过网络或......
  • ElementUI Checkbox 多选框 返回对象
    checkBox和checkGroup通过v-model绑定的数据只能是number/string/Array 如何回调返回对象呢? 已知能返回label字符串,我们可以把label=对象id +','+ 对象名称拼接,然后返回,或者label=json字符串再传出每次选中操作后会回调返回选中数组 ......
  • 19、模糊查询操作符详解
    模糊查询:本质是比较运算符运算符语法描述isnullaisnull如果操作符为null,则结果为真isnotnullaisnotnull如果操作符不为null,则结果为真betweenabetweenbandc若a在b和c之间,则结果为真likealikebSQL匹配,如果a匹配到b,则结果为真inain(a1......
  • 解题报告 P2572 [SCOI2010] 序列操作
    P2572[SCOI2010]序列操作线段树。首先对于一个区间,我们需要存储\(8\)个量来保证算出答案:\(1\)的个数,\(0\)的个数,最左边连续\(1/0\)个数,最右边连续\(1/0\)个数,区间内最长连续\(1/0\)个数。可以如下定义一个节点:structnode{ intcnt1,cnt0,ls1,ls0,rs1,rs0,ss1,s......
  • 飞腾派使用内核态编程完成LED20控制操作
    1基础知识在该程序设计过程中我们首先需要学习如何在内核态编程。1.1内核态编程在内核态中编写C语言程序和在用户态中编写C语言程序不同,在用户态中编写C语言程序,我们可以使用libc库,通过系统调用访问内核态的相关操作。基础的内核态程序如下:#include<linux/init.h>#include......