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

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

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

(2)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 图解SQL的Join

    图解SQL的Join

    2022年2月18日
    41
  • 华为云计算hcip认证用处大吗_华为云计算数据中心

    华为云计算hcip认证用处大吗_华为云计算数据中心华为云计算HCNA–FusionCompute

    2022年4月21日
    76
  • 如何更好的组织代码「建议收藏」

    如何更好的组织代码「建议收藏」一、组织代码的原因或意义代码的编写应当首先让其他人能够看懂,其次才是让机器能够执行。合理组织代码的目的并不是让计算机理解你的代码,而是让其他人能够很好地读懂你所编写的代码,进而在某种程度上高效而自信

    2022年8月3日
    8
  • 基于jsp和基于web的区别_java发送短信

    基于jsp和基于web的区别_java发送短信最新web/java/jsp实现发送手机短信验证码和邮箱验证码的注册登录功能(详细)最近几天有人需要帮忙做一个关于发送验证码的功能,之前没有做过,于是我鼓捣一阵子,记录一下关于web项目中注册登录常用的手机验证码和邮箱验证码的发送。作为一个演示项目,我没有使用任何框架,用了一个简单的jsp+Servlet,当然用boostrap美化了一下。代码带有注释,非常简单易懂。一、手机验证码由于手机…

    2022年10月13日
    4
  • 数组splice_数组concat方法

    数组splice_数组concat方法有三个方法经常会混淆,但是了解它后你会发现很好区分splice方法是数组特有的方法spite方法是字符串特有的方法slice方法是字符串和数组共同都有的方法这里介绍下数组的常用方法数组的splice方法splice()函数用于从当前数组中移除一部分连续的元素。如有必要,还可以在所移除元素的位置上插入一个或多个新的元素。该函数以数组形式返回从当前数组中被移除的元素。该…

    2022年9月25日
    4
  • unresolved external symbol怎么解决_fatal error lnk1169

    unresolved external symbol怎么解决_fatal error lnk11691.LNK2019错误一般都是compile是能找到相应的header(.h)文件,但链接时找不到相应的lib库文件(也含dll文件)。如果相关库存在的话,一般通过添加附加库,可以解决问题

    2022年10月5日
    2

发表回复

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

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