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

        在一些有多选的例子中，就需要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>