1. 全栈程序员必看首页

JS 怎么控制 checkbox 选中

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

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


相关推荐

  • ElasticSearch索引基本查询语法[通俗易懂]

    ElasticSearch索引基本查询语法[通俗易懂]

    ElasticSearch索引基本查询语法[通俗易懂]#列出所有索引GET/_cat/indices?v#删除索引DELETE索引名#条件查询GET/索引/类型/_search?pretty{“query”:{“bool”:{“must”:[{“match”:{“tweet”:”elasticsea…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月23日
    0
  • Aras Innovator: 如何导入项目模板

    Aras Innovator: 如何导入项目模板

    Aras Innovator: 如何导入项目模板在Araslabs下载内容中，有两个是ProjectTemplate数据文件，一个是APQP,一个是NPI,下载下来是xml数据。安装方法如下：1.使用nsah.aspx安装2.把模板状态升级到approved3.生成新项目计划时，可选择新增加的模板了

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月23日
    0
  • OpenSSL的Heartbleed漏洞原理及简单模拟

    OpenSSL的Heartbleed漏洞原理及简单模拟

    OpenSSL的Heartbleed漏洞原理及简单模拟Heartbleed漏洞自从Heartbleed漏洞曝光以来，网上能看到很多相关的文章，但大部分都是写的云里雾里，本文尝试直观明了的对漏洞原理进行说明及模拟。OpenSSL是SSL协议以及一系列加密算法的开源实现，使用C语言编写。OpenSSL采用Apache开源协议，可以免费用于商业用途，在很多linux发行版和服务器中得到广泛应用。OpenSSL出现漏洞造成的影响是巨大的，Heartb

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月25日
    5
  • python-练习实现猜数字的循环

    python-练习实现猜数字的循环

    python-练习实现猜数字的循环

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月2日
    30
  • 深入浅出讲解Optional包装类

    深入浅出讲解Optional包装类

    深入浅出讲解Optional包装类Optional是JDK8的新特性，首先这个类是被final修饰的，并且这个类只有一个Object的超类，下面是这个类的结构。我们可以看到一共也没多少方法，所以我觉得就从这个类开始，养成阅读源码的习惯，再合适不过了。Optional的作用在写这篇博客之前，看过好多相关的资料，大体上来说这个类就是用来解决万恶的空指针异常，用来避免繁琐的!=null代码而存在的。那你也太…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月21日
    0
  • 苹果手机怎么抓取京东ck(ios获取京东cookie)

    苹果手机怎么抓取京东ck(ios获取京东cookie)

    安卓手机抓取京东cookie手机下载Alook浏览器下载地址https://ddayh.lanzoui.com/ioHNNuzjunc打开Alook浏览器访问京东手机版网址https://m.jd.com/点击网页的右上角登陆账号（短信验证登录）登录完成以后点击浏览器中间的菜单键右滑一下找到工具箱->最下面的开发者工具->Cookies，拷贝注意获取到cookie后不能直接退出，否则cookie会立刻失效，关闭窗口即可。获取多账号cookie可以打开无痕窗口，没获取到一

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月15日
    872

发表回复

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

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