在js中怎么获取checkbox

JavaScript019

在js中怎么获取checkbox,第1张

思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中)。下面进行实例演示:

1、HTML结构

<input type="checkbox" name="test" value="1"/><span>1</span>

<input type="checkbox" name="test" value="2"/><span>2</span>

<input type="checkbox" name="test" value="3"/><span>3</span>

<input type="checkbox" name="test" value="4"/><span>4</span>

<input type="checkbox" name="test" value="5"/><span>5</span><br>

<input type='button' value='提交' onclick="fun()"/>

2、javascript代码

function fun(){

obj = document.getElementsByName("test")

check_val = []

for(k in obj){

if(obj[k].checked)

check_val.push(obj[k].value)

}

alert(check_val)

}

3、演示效果

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

在checkbox加上同样的name属性

直接上代码:

function Lond_ckeck(objname){

obj = document.getElementsByName(objname)

checkval = []

for(k in obj){

if(obj[k].checked)

checkval.push(obj[k].value)

}

return checkval

}

使用方法

效果

HTML代码

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript" src='js/Lond.js'></script>

</head>

<body>

<input type="checkbox" name="hell" value="选中1">

<input type="checkbox" name="hell" value="选中2">

<input type="checkbox" name="hell" value="选中3">

<input type="checkbox" name="hell" value="选中4">

<button onclick="fun()">测试</button>

<script type="text/javascript">

function fun(){

alert(Lond_ckeck('hell'))//id)

}

</script>

</body>

</html>

如果上面出错请复制下面HTML代码:

HTML代码

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<input type="checkbox" name="hell" value="选中1">

<input type="checkbox" name="hell" value="选中2">

<input type="checkbox" name="hell" value="选中3">

<input type="checkbox" name="hell" value="选中4">

<button onclick="fun()">测试</button>

<script type="text/javascript">

function fun(){

alert(Lond_ckeck('hell'))//id)

}

function Lond_ckeck(objname){

obj = document.getElementsByName(objname)

checkval = []

for(k in obj){

if(obj[k].checked)

checkval.push(obj[k].value)

}

return checkval

}

</script>

</body>

</html>

注意事项: 传入参数一定是name属性。