JavaScript--value和checked的用法

无限循环者

已于 2023-08-05 16:26:13 修改

阅读量1.2k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-07-02 11:23:27 首次发布

本文链接：https://blog.csdn.net/m0_74293254/article/details/131499047

版权

JavaScript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了在JavaScript中如何获取和设置HTML表单元素如文本输入框、下拉列表、复选框和单选按钮的值，以及如何检查复选框和单选按钮的选中状态。通过示例代码展示了如何阻止表单默认提交并从控制台打印用户输入的信息。

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

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

checked 是一个属性，用于表示单选框或复选框是否被选中。它是一个布尔属性，具有两个可能的取值：

当 checked 属性存在时，且其值为 true，表示单选框或复选框已被选中。
当 checked 属性不存在或其值为 false，表示单选框或复选框未被选中。

获取表单输入框的值：

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>

运行结果: