1. 全栈程序员必看首页

JS 怎么控制 checkbox 选中

全栈程序员-站长 • • 未分类 • 阅读 60

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

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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<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

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/159837.html原文链接：https://javaforall.net

赞 (2)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2022年7月15日 上午7:16
下一篇 2022年7月15日 上午7:16


相关推荐

  • CTPN理解

    CTPN理解

    CTPN理解CTPNpipline 类似于 fasterrcnn 的二阶段检测算法 通过 anchor 作为中间元素进行回归 不同之处是增加了 LSTM 单元 anchor 固定宽度为 16 个像素 高度设定为 10 个值 ctpn 中的 anchor 图片来自这里 IOU 的计算 由于 anchor 指定宽度 16 所以对 GoundTruth 的坐标也进行变换 得到宽度为 16 的 GT 和 fasterrcnn 一样计算 anchor 与 GT 的 IOU RPN 为 LSTM 输出序列经 fc 后得到部分 CTPN 中的 RPN 图片来自这里 pro

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月17日
    2
  • vscode一键配置C/C++多个C及CPP文件编译与tasks.json和launch.json原理

    vscode一键配置C/C++多个C及CPP文件编译与tasks.json和launch.json原理

    vscode一键配置C/C++多个C及CPP文件编译与tasks.json和launch.json原理vscode配置环境及配置原理搜了很多的教程，发现要么教程太老，给的配置信息里面有些参数都不能使用了，要么就是直接扔下自己的配置信息就没了，不知道咋来的，也不能拿过来直接用，让我这种小白无从下手，于是就摸索整理一下，帮助一下像我这样小白刚入手的小伙伴们。原理我觉得最重要的就是我们要明白各个配置文件是干嘛的，它是怎么被vscode使用的，明白这一点，那么自己就可以比较清晰参数该怎么改，应该改哪些参数，而不是拿着别人的配置文件，无从下手。配置文件基本的原理（只是原理，不是咋配置的）：vscode使用的最

    全栈程序员-站长的头像 全栈程序员-站长
    2025年8月11日
    4
  • Java的封装方法

    Java的封装方法

    Java的封装方法在面向对象程式设计方法中，封装（英文名称：Encapsulation）是指一种将抽象性函式接口的实现细节部份包装、隐藏起来的方法。封装可以被认为是一个保护屏障，防止该类的代码和数据被外部类定义的代码随机访问。要访问该类的代码和数据，必须通过严格的接口控制。适当的封装可以让程式码更容易理解与维护，也加强了程式码的安全性，这个就是Java封装方法。下面是封装方法的示例代码：publicclass…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月8日
    32
  • centos7 安装图形界面

    centos7 安装图形界面

    centos7 安装图形界面本人用VMware版本15.0.2build-10952284（关系不大）开启前要在虚拟机–>设置–>3D图形如下如果是云服务器跳过此步yum下载图形界面软件yumgroupinstall”GNOMEDesktop””GraphicalAdministrationTools”修改配置ln-sf/lib/systemd/system…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月16日
    44
  • vuex使用教程(最好最详细的乒乓教程)

    vuex使用教程(最好最详细的乒乓教程)

    最详细的Vuex教程什么是Vuex？vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。引入Vuex（前提是已经用Vue脚手架工具构建好项目）1、利用npm包管理工具，进行安装vuex。在控制命令行中输入下边的命令就可以了。npminstallvuex

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月14日
    117
  • 北京儿研所电话预约挂号流程详解

    北京儿研所电话预约挂号流程详解

    北京儿研所电话预约挂号流程详解北京儿童医院电话预约挂号流程详解　　北京儿童医院以其权威的学科地位、优秀的医师团队及先进的技术设备吸引来自全国各地的患儿前来就诊，与此同时，挂号难就成了患儿家长及院方最头疼也最无奈的问题，门诊楼扩建的

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月6日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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