JS 怎么控制 checkbox 选中的问题

最新推荐文章于 2024-03-04 15:28:47 发布

原创最新推荐文章于 2024-03-04 15:28:47 发布 · 3.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

44 篇文章

订阅专栏

这篇博客介绍了如何使用HTML创建一组复选框，并通过JavaScript实现复选框的值与输入框文本的同步。当点击'确定'按钮时，JavaScript函数`save()`会根据输入框中的值设置复选框的状态，实现数据的双向绑定。

1、HTML结构

<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="idData"><input type="button" value="确定" onclick="save()">

2、javascript代码

function save(){
    //val = "1,2,3,4,5"

    var val = document.getElementById("idDate").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

            }

        }

    }

}