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>

猜你喜欢

转载自liujun11.iteye.com/blog/2391127