JS 怎么控制 checkbox 选中

JS 怎么控制 checkbox 选中2019独角兽企业重金招聘Python工程师标准>>>…

大家好,又见面了,我是你们的朋友全栈君。

<script>
window.onload = function(){

//获取id 为 check 的隐藏域的值(比如“2,5”)
//将name 为 about ,value为2和5的checkbox 设为选中 
}
</script>
以上代码怎么写?

 

思路:获取checkbox对象,根据value属性设置checkbox的checked属性(true为选中,false为取消选中)。下面实例演示——根据文本框的制定值设置复选框的选中项:

1、HTML结构

1

2

3

4

5

6

<input name="test" type="checkbox" value="1" />item-1

<input name="test" type="checkbox" value="2" />item-2

<input name="test" type="checkbox" value="3" />item-3

<input name="test" type="checkbox" value="4" />item-4

<input name="test" type="checkbox" value="5" />item-5

<input type="text" id="val"><input type="button" value="确定" onclick="fun()">

2、javascript代码

1

2

3

4

5

6

7

8

9

10

11

12

function fun(){

    var val = document.getElementById("val").value.split(",");

    var boxes = document.getElementsByName("test");

    for(i=0;i<boxes.length;i++){

        for(j=0;j<val.length;j++){

            if(boxes[i].value == val[j]){

                boxes[i].checked = true;

                break

            }

        }

    }

}

3、效果演示

5bafa40f4bfbfbedb576cc047ef0f736afc31f99.jpg

转载于:https://my.oschina.net/zhangyaxin/blog/1587987

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159837.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(3)


相关推荐

  • nginx负载均衡的原理简介_负载均衡原理

    nginx负载均衡的原理简介_负载均衡原理1、Nginx负载均衡的原理是什么?​客户端向反向代理发送请求,接着反向代理根据某种负载机制转发请求至目标服务器(这些服务器都运行着相同的应用),并把获得的内容返回给客户端,期中,代理请求可能根据配置被发往不同的服务器。2、Nginx负载均衡的作用是什么?​负载均衡:分摊到多个操作单元上进行执行,和它的英文名称很匹配。就是我们需要一个调度者,保证所有后端服务器都将性能充分发挥,从而保持服…

  • Oracle 12C ORA-01017/ORA-28040问题总结「建议收藏」

    Oracle 12C ORA-01017/ORA-28040问题总结「建议收藏」在搭建12.2.0版本双节点RAC项目环境以后,测试链接其他客户端连接时出现了登陆的问题,客户端版本10.2.0.1链接报错如下:[root@12cbin]#oerrora2804028040,0000,"Nomatchingauthenticationprotocol"//*Cause:Noacceptibleauthenticationprotocol…

  • ios 文件操作[通俗易懂]

    ios 文件操作[通俗易懂][+]获取应用沙盒根路径获取Documents目录路径获取Library目录路径获取Cache目录路径获取Tmp目录路径创建文件夹创建文件写数据到文件读文件数据文件属性删除文件    iOS的沙盒机制,应用只能访问自己应用目录下的文件。iOS不像android,没有SD卡概念,不能直接访问图像、视频等内容。iOS应用产生的内容,如图像、文件、缓存内容等都必须存储在自己的沙

  • 在非Activity中使用startActivityForResult

    在非Activity中使用startActivityForResult在开发过程中有时会有需要在非activity中,跳转到另一个activity中,再携带某些值回到先前的页面,我们在很多地方可以拿到context,但这个时候想使用startActivityForResult时却发现无法调用,因为这个方法是Activity下的,而非Context下,这个时候只需要强转一下即可,将获取到的context转成activity就可以使用这个方法了,在我的…

  • 微机原理与接口技术电子版_微机原理与接口技术主要内容

    微机原理与接口技术电子版_微机原理与接口技术主要内容微型计算机原理接口与技术综述论文汇编微型计算机原理与接口技术课程综述内容摘要微型计算机原理与接口技术主要讲的是微型计算机的基本工作原理、系统的组成及接口技术和基本的汇编语言程序设计知识。本文主要对微机原理与接口技术的学习内容和应用做介绍。一、微型计算机原理与接口技术课程综述本课程共分十章。第一章介绍了微型计算机的整体概念;第二章讲述了80X86微处理器的结构、功能、总线操作时序和80X86微处理器…

  • Gradle DSL method not found: ‘google()’

    Gradle DSL method not found: ‘google()’

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号