JavaScript--value的用法

在JavaScript中，"value"通常用于表示HTML表单元素的值或者DOM元素的属性值。以下是一些常见的情况，具体使用方式可能会根据实际场景而有所不同。

获取表单输入框的值：

var inputValue = document.getElementById('inputId').value;

设置表单输入框的值：

var inputValue = document.getElementById('inputId').value;

获取下拉列表选中项的值：

var selectValue = document.getElementById('selectId').value;

获取复选框的选中状态：

var checkboxValue = document.getElementById('checkboxId').checked;

获取单选按钮的选中值：

var radioValue = document.querySelector('input[name="radioGroupName"]:checked').value;

代码示例:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Value Example</title>
</head>
<body>

  <form id="myForm">
    <!-- 文本输入框 -->
    <label for="nameInput">姓名：</label>
    <input type="text" id="nameInput" value=""><br><br>

    <!-- 下拉列表 -->
    <label for="genderSelect">性别：</label>
    <select id="genderSelect">
      <option value="male">男</option>
      <option value="female">女</option>
    </select><br><br>

    <!-- 复选框 -->
    <label for="hobbyCheckbox">爱好：</label>
    <input type="checkbox" id="sportsCheckbox" value="sports">运动
    <input type="checkbox" id="readingCheckbox" value="reading">阅读<br><br>

    <!-- 单选按钮 -->
    <label for="colorRadio">喜欢的颜色：</label>
    <input type="radio" name="colorRadio" value="red">红色
    <input type="radio" name="colorRadio" value="blue">蓝色
    <input type="radio" name="colorRadio" value="green">绿色<br><br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
  </form>

  <script>
    // 阻止表单默认提交行为
    document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault();

      // 获取表单元素的值
      var nameValue = document.getElementById('nameInput').value;
      var genderValue = document.getElementById('genderSelect').value;
      var sportsChecked = document.getElementById('sportsCheckbox').checked;
      var readingChecked = document.getElementById('readingCheckbox').checked;
      var colorValue = document.querySelector('input[name="colorRadio"]:checked').value;

      // 输出值到控制台
      console.log('姓名：' + nameValue);
      console.log('性别：' + genderValue);
      console.log('爱好：' + (sportsChecked ? '运动' : '') + (readingChecked ? ', 阅读' : ''));
      console.log('喜欢的颜色：' + colorValue);
    });
  </script>

</body>
</html>

运行结果:

我们可以填写表单中的各项内容，然后点击提交按钮。通过JavaScript，我们获取了各个表单元素的值，并将其输出到浏览器的控制台中供查看。

JavaScript--value的用法

猜你喜欢