js层级checkbox,js层级对象遍历

更新：2022-11-20 19:08

本文目录一览：

1. 如何用js 给checkbox
2. js如何实现复选框的多级联动
3. js中怎么获取checkbox选中的值

如何用js 给checkbox

思路：获取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. 效果演示

js如何实现复选框的多级联动

1. 为复选框的 onclick 事件绑定js方法
2. 在js方法中，判断复选框当前值
   • 如果选中，将关联的复选框也选中
   • 如果没有选中，将关联的复选框取消选中

js中怎么获取checkbox选中的值

js中获取checkbox选中的值的方法：

<script>
function checkbox()
{
    var str=document.getElementsByName("box");
    var objarray=str.length;
    var chestr="";
    for (i=0;i<objarray;i++)
    {
        if(str[i].checked == true)
        {
            chestr+=str[i].value+",";
        }
    }
    if(chestr == "")
    {
        alert("请先选择一个爱好");
    }
    else
    {
        alert("先择的是："+chestr);
    }
}
</script>

选择爱好：

<input type="checkbox" name="box" id="box1" value="跳水" />跳水
<input type="checkbox" name="box" id="box2" value="跑步" />跑步
<input type="checkbox" name="box" id="box3" value="听音乐" />听音乐
<input type="button" name="button" id="button" onclick="checkbox()" value="提交" />