JavaScript の使用法 -- 値

JavaScript では、「値」は通常、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 を通じて各フォーム要素の値を取得し、それをブラウザーのコンソールに出力して表示します。

おすすめ