欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery css类javascript如何获取checkbox复选框选中项的值  

程序员文章站 2022-07-03 16:20:38
...

        在一些有多选的例子中,就需要checkbox,但是怎么具体实现呢?javascript如何获取checkbox选中项的值,主要思路是获取所有的checkbox,然后遍历哪些checkbox被选中,最后使用checkbox的value属性获取选中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="提交" />

 

他会出现一个选项,让你进行选择,选择之后按提交,就会出现一个提示框,展示出你选择的选项。

 

工作原理:

(1)使用document.getElementsByName("box");获取HTML文档中所有的checkbox,获取的结果为数组

 

(2)遍历数组,数组中的每个元素为一个checkbox复选框,通过判断checkbox的checked属性来判断checkbox是否被选中,如果checked属性为true,表示选中,此时我们可以使用checkbox的value属性来获取checkbox选中项的值。

 

还有一个原理一样,写法不太一样的例子

<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>
<input type='button' value='提交' onclick="fun()"/>
<script>
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);
}
</script>