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


相关推荐

  • JavaAPI之PropertyDescriptor[通俗易懂]

    JavaAPI之PropertyDescriptor[通俗易懂]

    JavaAPI之PropertyDescriptor[通俗易懂]随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)结构java.beans类PropertyDescriptorjava.lang.Objectjava.beans.FeatureDescriptorjava.beans….

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月1日
  • ES6 判断对象是否为空「建议收藏」

    ES6 判断对象是否为空「建议收藏」

    ES6 判断对象是否为空「建议收藏」判断对象是否为空最简单的方式就是用ES6的letobj={}if(Object.keys(obj).length==0){ console.log(“对象是空的”)}else{//Object.keys(obj).length可获取对象的长度console.log(“obj的长度：”+Object.keys(obj).length)}…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月22日
  • bytebuf使用_java byte类型

    bytebuf使用_java byte类型

    bytebuf使用_java byte类型ByteBufAllocator为了减少分配和释放内存的开销，Netty通过支持池类ByteBufAllocator，可用于分配的任何ByteBuf我们已经描述过的类型的实例。是否使用池是由应用程序决定的，表5.8列出了ByteBufAllocator提供的操作。Table5.8ByteBufAllocatormethods名称描述buffer()buffer(int)buf…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月19日
  • linux pycharm2021激活码[在线序列号] idea

    linux pycharm2021激活码[在线序列号]

    linux pycharm2021激活码[在线序列号]，https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧！

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月19日
  • python ffmpeg模块_ffmpeg python

    python ffmpeg模块_ffmpeg python

    python ffmpeg模块_ffmpeg pythonAfghanistanAlandIslandsAlbaniaAlgeriaAmericanSamoaAndorraAngolaAnguillaAntarcticaAntiguaandBarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelgiumBeliz…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月27日
  • mysql分区之range分区「建议收藏」

    mysql分区之range分区「建议收藏」

    mysql分区之range分区「建议收藏」随着互联网的发展，各方面的数据越来越多，从最近两年大数据越来越强的呼声中就可见一斑。我们所做的项目虽算不上什么大项目，但是由于业务量的问题，数据也是相当的多。数据一多，就很容易出现性能问题，而为了解决这个问题我们通常很容易想到集群、分片等。但是在某些时候却不一定必须要用集群、分片，也可以适当的使用数据分区。什么是分区？（以下引用自：http://wangweiak47.blog.51

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月7日

发表回复

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

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