js中怎么获取checkbox选中的值

JavaScript037

js中怎么获取checkbox选中的值,第1张

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

<script>

function checkbox()

{

var str=document.getElementsByName("box")

var objarray=str.length

var chestr=""

for (i=0i<objarrayi++)

{

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="提交" />

举个例子,比如如下是HTML的结构:

这里推荐使用jQuery库,比较方便。以下是代码:

大致思路就是:先利用name属性值获取checkbox对象,然后循环判断checked属性。(true表示被选中,false表示未选中)

具体解释一下:

首先用document.getElementsByName()这个方法,通过input标签的name属性将input元素获取,并存进obj这个变量值中。然后建一个check_val的数组,通过for循环将input标签的value值存入数组中,这样就可以获取checkbox的选中的多个值。

扩展资料:

Checkbox 对象代表一个 HTML 表单中的 一个选择框。

在 HTML 文档中 <input type="checkbox">每出现一次,Checkbox 对象就会被创建。

您可以通过遍历表单的 elements[] 数组来访问某个选择框,或者通过使用 document.getElementById() 。

参考资料:MDN—关于CheckBox属性