js根據input標籤的type屬性篩選元素

admin發表於2017-03-28
JS

如果使用jquery實現此功能的話，非常的輕鬆，使用屬性選擇器進行一下篩選即可。

因為這是經過封裝了，使用原生的javascript可就沒有這麼簡單了，下面就通過程式碼例項介紹一下如何實現。

程式碼如下:

[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 oshow=document.getElementById("show");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    var values="";
    var inputs=document.getElementsByTagName("input");
    for(var index=0;index<inputs.length;index++){
      if(inputs[index].type=="text"){
        values=values+inputs[index].value;
      }
    }
    oshow.innerHTML=values;
  }
}
</script> 
</head>
<body>
<div id="show"></div>
<input type="checkbox"  value="核取方塊"/>
<input type="radio" value="單選按鈕"/>
<input type="text" value="文字框"/>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，input元素物件都有一個type屬性，然後通過遍歷就可以實現我們的要求。

相關文章