javascript 获取 input

JavaScript作为一种Web前端开发语言，广泛应用于网站的交互和动态效果实现。特别是在表单验证和用户输入处理中，JavaScript可以让开发者比较轻松地获取输入元素的值和属性。本文将介绍JavaScript获取input元素值和属性的方法。

获取input元素值的方法非常简单，只需使用input元素的value属性即可。举个例子：

!-- HTML代码 -->
    input type="text" id="input1">
    button onclick="getInput()">
    获取input1的值/button>
    !-- JavaScript代码 -->
function getInput() {
    const input1 = document.getElementById("input1");
    const value = input1.value;
    alert(value);
}
    

在这个例子中，我们给input元素加上了一个ID“input1”并通过JavaScript获取到了这个元素。然后，我们在getInput函数中通过 .value 属性获取input元素的值并将其alert出来。这样，用户输入的信息将以弹窗的形式显示出来。

不过，获取input元素属性的方法需要注意的是每一种type类型的input会有不同的属性，举个例子：

!-- HTML代码 -->
    input type="text" id="input2" value="default_value">
    button onclick="getAttrs()">
    获取input2的属性/button>
    !-- JavaScript代码 -->
function getAttrs() {
    const input2 = document.getElementById("input2");
    const value = input2.value;
    const name = input2.name;
    const type = input2.type;
    const placeholder = input2.placeholder;
alert(`value: ${
value}
, name: ${
name}
, type: ${
type}
, placeholder: ${
placeholder}
    `);
}
    

在这个例子中，我们给input元素加上了不同的属性。首先，我们还是通过JavaScript获取到这个元素，之后通过 .value 属性获取input元素的值。除此之外，还获取了该input元素的其他属性，包括id、name、type和placeholder。注意到，我们在alert语句中使用了反引号（ ` ）以将这些属性信息组合在一起输出。

如果我们要获取radio或者checkbox的值，则需要更进一步的操作：

!-- HTML代码 -->
    input type="radio" id="radio1" name="radio_group" value="radioValue1">
    input type="radio" id="radio2" name="radio_group" value="radioValue2">
    button onclick="getRadio()">
    获取radio值/button>
    !-- JavaScript代码 -->
function getRadio() {
    const radios = document.getElementsByName("radio_group");
    let selectedValue;
    for (let i = 0;
     i  radios.length;
 i++) {
if (radios[i].checked) {
    selectedValue = radios[i].value;
    break;
}
}
    alert(selectedValue);
}
    

在这个例子中，我们给两个radio元素设置了相同的name属性。这意味着这两个元素是一组，用户只能选择其中一个。我们可以通过document.getElementsByName()方法获取这个元素组。但是，我们不能通过value属性获取这个组的值，因为这个value属性是每一个独立的元素的值。因此，我们需要使用一个for循环遍历整个组，找到用户选择的值并输出。

在获取checkbox的值时，也需要与radio一样的操作：

!-- HTML代码 -->
    input type="checkbox" id="checkbox1" value="checkboxValue1">
    input type="checkbox" id="checkbox2" value="checkboxValue2">
    button onclick="getCheckbox()">
    获取checkbox值/button>
    !-- JavaScript代码 -->
function getCheckbox() {
    const cb1 = document.getElementById("checkbox1");
    const cb2 = document.getElementById("checkbox2");
    let selectedValues = "";
if (cb1.checked) {
    selectedValues += cb1.value + " ";
}
if (cb2.checked) {
    selectedValues += cb2.value + " ";
}
    alert(selectedValues);
}
    

在这个例子中，我们给两个checkbox元素设置了不同的value属性，并给它们分别添加了ID。用户可以选择一个或者多个checkbox。我们同样需要遍历这两个checkbox元素并将被选中的元素的value值组合起来输出。

总之，获取input元素值和属性的方法取决于input元素的type类型，但这些获取方式都比较简单。当我们需要对用户输入进行验证或处理时，这些方法就可以帮我们快速获取输入值并进行下一步操作。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！