js获取选中checkbox复选框的值

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了获取选中复选框的值。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var inputs=document.getElementsByTagName("input");
  for(var index=0;index<inputs.length;index++){
    inputs[index].onclick=function(){
      var valueStr="";
      for(var y=0;y<inputs.length;y++){
        if(inputs[y].checked){
          valueStr=valueStr+inputs[y].value;
        }
      }
      odiv.innerHTML=valueStr;
    }
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="checkbox" name="softwhy" value="1"/>前端教程网一
<input type="checkbox" name="softwhy" value="2"/>前端教程网二
<input type="checkbox" name="softwhy" value="3"/>前端教程网三
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(2).var odiv=document.getElementById("antzone"),获取id属性值为antzone的元素对象。

(3).var inputs=document.getElementsByTagName("input"),获取input元素对象集合。

(4).for(var index=0;index<inputs.length;index++){},遍历集合中的每一个input元素。

(5).inputs[index].onclick=function(){},为input元素注册onclick事件处理函数。

(6).var valueStr="",生命一个变量用来存储复选框的value值。

(7).for(var y=0;y<inputs.length;y++){

  if(inputs[y].checked){

    valueStr=valueStr+inputs[y].value;

  }

},遍历每一个复选框,将选中的复选框的value值累加到valueStr。

(8).odiv.innerHTML=valueStr,在div中显示。

二.相关阅读:

(1).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。

(2).checked属性可以参阅javascript checkbox.checked一章节。

(3).innerHTML属性可以参阅js innerHTML一章节。

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容