JS 选择性修改input标签的属性

最新推荐文章于 2023-08-04 08:55:57 发布

夏沐_lk

最新推荐文章于 2023-08-04 08:55:57 发布

阅读量8.6k

点赞数

分类专栏： js代码文章标签： JS 修改属性 input 选择性

本文链接：https://blog.youkuaiyun.com/guanmao4322/article/details/86367239

版权

js代码专栏收录该内容

65 篇文章

订阅专栏

本文介绍了如何使用JavaScript选择性地修改input标签的属性。分别展示了两种方法，一种是直接通过元素ID获取并修改属性，另一种是通过name属性值使用getElementsByName函数进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
}