js通過type屬性值篩選input元素程式碼例項

antzone發表於2017-03-26
JS

大家知道input元素的type屬性有多種，每一種type屬性值代表一種不同的input元素，比如type為text代表著文字框，type為radio代表著單選按鈕等，下面就介紹一下如何利用原生javascript實現對input元素的篩選功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var inputs=obox.getElementsByTagName("input");
  var oshow=document.getElementById("show");
  var ele=[];
  for(var index=0;index<inputs.length;index++){
    if(inputs[index].type=="text"){
      ele.push(inputs[index]);
    }
  }
  oshow.innerHTML=ele[0].value;
}
</script>
</head>
<body>
<div id="show"></div>
<div id="box">
  <input type="checkbox" value="核取方塊"/>
  <input type="text" value="螞蟻部落"/>
  <input type="radio" value="單選按鈕"/>
</div>
</body>
</html>

上面的程式碼實現了是篩選功能，程式碼比較簡單，這裡就不多介紹了。

相關文章