天天看點

JS 選擇性修改input标簽的屬性

HTML代碼部分:

<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
           

JS代碼部分:

<script>

  //根據id擷取按鈕,為按鈕注冊點選事件,添加事件處理函數
  document.getElementById("btn").onclick = function () {
    //擷取所有的文本框
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
      //判斷這個元素是不是按鈕
      if (inputs[i].type != "button") {
        inputs[i].value = "其實,qqqqqq";
      }
    }
  };
</script>
           

第二種方式:

HTML代碼部分:

<input type="button" value="顯示效果" id="btn"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name2"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/>

<script src="common.js"></script>
           

JS代碼部分:使用函數document.getElementsByName("name1");根據name的屬性值擷取元素

//點選按鈕,改變所有name屬性值為name1的文本框中的value屬性值

  my$("btn").onclick=function () {
    //通過name屬性值擷取元素-------表單的标簽
    var inputs=document.getElementsByName("name1");
    for(var i=0;i<inputs.length;i++){
      inputs[i].value="我很好";
    }
  };
           

common.js

/**
 * 根據id屬性的值,傳回對應的标簽元素
 * @param id id屬性的值,string類型的
 * @returns {Element} 元素對象
 */
function my$(id) {
    return document.getElementById(id);
}