js获取input的输入值|极客笔记

js获取input的输入值

在Web开发中，经常需要获取用户在页面中输入的值，以便进行相应的处理和操作。其中，获取input输入框的值是一个常见的需求。在JavaScript中，可以通过不同的方法来获取input输入框的值，本文将详细介绍这些方法。

使用原生JavaScript获取input的值

1. 通过id获取input元素

在HTML中，可以为input元素设置id属性，通过该id属性可以通过原生JavaScript获取到相应的input元素，然后再获取其值。

<input type="text" id="input" placeholder="请输入文本">
<button onclick="getValue()">获取input的值</button>

<script>
function getValue() {
  var inputElement = document.getElementById('input');
  var value = inputElement.value;
  console.log(value);
}
</script>

在上面的示例中，通过id属性获取到id为”input”的input元素，然后通过value属性获取到input元素的值，在点击按钮时，会打印出输入框中的值。

2. 通过class获取input元素

除了通过id获取input元素外，还可以通过class属性获取多个input元素，并分别获取它们的值。

<input type="text" class="text-input" placeholder="请输入文本">
<input type="text" class="text-input" placeholder="请输入文本">
<button onclick="getValues()">获取input的值</button>

<script>
function getValues() {
  var inputElements = document.getElementsByClassName('text-input');
  for (var i = 0; i < inputElements.length; i++) {
    var value = inputElements[i].value;
    console.log(value);
  }
}
</script>

在上面的示例中，通过class属性获取class为”text-input”的input元素，然后遍历获取每个input元素的值，在点击按钮时，会分别打印出每个输入框中的值。

3. 通过标签名获取input元素

如果页面中有多个input元素，可以通过标签名选择器获取所有的input元素，然后再获取它们的值。

<input type="text" placeholder="请输入文本">
<input type="text" placeholder="请输入文本">
<button onclick="getValues()">获取input的值</button>

<script>
function getValues() {
  var inputElements = document.getElementsByTagName('input');
  for (var i = 0; i < inputElements.length; i++) {
    if (inputElements[i].type === 'text') {
      var value = inputElements[i].value;
      console.log(value);
    }
  }
}
</script>

在上面的示例中，通过标签名选择器获取所有的input元素，然后判断其type属性是否为”text”，然后再获取input元素的值，在点击按钮时，会打印出所有type为”text”的输入框的值。

使用jQuery获取input的值

除了原生JavaScript外，还可以使用jQuery来获取input输入框的值。jQuery是一个功能强大而简洁的JavaScript库，能够简化DOM操作，提高开发效率。

首先需要引入jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

1. 通过id获取input元素的值

通过jQuery可以更方便地选择元素，可以通过id选择器获取input元素，然后再获取其值。

<input type="text" id="input" placeholder="请输入文本">
<button onclick="getValue()">获取input的值</button>

<script>
function getValue() {
  var value = $('#input').val();
  console.log(value);
}
</script>

在上面的示例中，通过id选择器获取id为”input”的input元素，然后通过val()方法获取其值，在点击按钮时，会打印出输入框中的值。

2. 通过class获取input元素的值

通过jQuery同样可以通过class选择器获取多个input元素，并分别获取它们的值。

<input type="text" class="text-input" placeholder="请输入文本">
<input type="text" class="text-input" placeholder="请输入文本">
<button onclick="getValues()">获取input的值</button>

<script>
function getValues() {
   $('.text-input').each(function() { var value =$ (this).val();
    console.log(value);
  });
}
</script>

在上面的示例中，通过class选择器获取class为”text-input”的input元素，使用each()方法遍历获取每个input元素的值，在点击按钮时，会分别打印出每个输入框中的值。

3. 通过属性选择器获取input元素的值

除了通过id和class选择器外，还可以使用属性选择器获取input元素，例如通过type属性选择所有type为”text”的input元素。

<input type="text" placeholder="请输入文本">
<input type="password" placeholder="请输入密码">
<button onclick="getValues()">获取input的值</button>

<script>
function getValues() {
   $('input[type="text"]').each(function() { var value =$ (this).val();
    console.log(value);
  });
}
</script>

在上面的示例中，通过属性选择器选择所有type为”text”的input元素，再通过each()方法遍历获取每个input元素的值，在点击按钮时，会打印出所有type为”text”的输入框的值。