フォームの値の取得 - Javascript

  • 作成日：
  • 最終更新日：2025/06/25

ラジオボタンの値を取得１

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form action="" name="myform">
    <p>性別
      <label><input type="radio" name="gender" id="" value="男" checked>男</label>
      <label><input type="radio" name="gender" id="" value="女">女</label>
    </p>
    <p><input id="btn" type="button" value="button"></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  let btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    let gender = document.getElementsByName('gender');
    console.log(gender); // NodeList(2) [input, input]

    for(let i = 0; i < gender.length; i++){
      if(gender[i].checked){
        const radioValue = gender[i].value;
        console.log(radioValue);
      };
    };
  });
};

ラジオボタンの値を取得２

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="script.js"></script>
  <title>Document</title>
</head>
<body>
  <form action="">
    <p><label for="apple"><input type="radio" name="fruits" id="apple" value="apple">apple</label></p>
    <p><label for="orange"><input type="radio" name="fruits" id="orange" value="orange">orange</label></p>
    <p><label for="banana"><input type="radio" name="fruits" id="banana" value="banana">banana</label></p>
    <p><label for="cherry"><input type="radio" name="fruits" id="cherry" value="cherry">cherry</label></p>
    <p><button type="button" id="btn">button</button></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  const btn = document.getElementById('btn');
  const ele = document.getElementsByName('fruits');
  
  btn.addEventListener('click', function(){
    let checkValue = '';
    for(let i of ele){
      if(i.checked){
        checkValue = i.value;
      }
    }
    console.log(checkValue);
  });
}

ラジオボタンのチェックを外す

script.js

window.onload = function(){
  const btn = document.getElementById('btn');
  const ele = document.getElementsByName('fruits');

  btn.addEventListener('click', function(){
    for(let i of ele){
      i.checked = false;
    }
  });
}

1つのチェックボックスの値の取得 - id 属性指定

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="script.js"></script>
  <title>sample</title>
</head>
<body>
  <h1>sample</h1>
  <form action="">
    <p><input type="checkbox" name="" id="auto">auto</p>
  </form>
  <button type="button" id="btn">button</button>
</body>
</html>

script.js

window.onload = function(){
  let btn = document.getElementById("btn");
  let auto = document.getElementById("auto");
  btn.addEventListener('click', function(){
    console.log(auto.checked)
  })
}

チェックボックスの値の取得１

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form action="" name="myform">
    <p>
      <label><input type="checkbox" name="os" value="iOS">iOS</label>
      <label><input type="checkbox" name="os" value="android">Android</label>
      <label><input type="checkbox" name="os" value="win">Windows</label>
      <label><input type="checkbox" name="os" value="mac">Mac</label>
    </p>
    <p><input id="btn" type="button" value="button"></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  const btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    const os = document.getElementsByName('os');
    let chkbox = "";

    for(let i = 0; i < os.length; i++){
      if(os[i].checked) {
        chkbox += os[i].value + ",";
      }
    };
    let pattern = /,$/;
    console.log(chkbox.replace(pattern, ''));
  });
};

チェックボックスの値の取得２

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="script.js"></script>
  <title>Document</title>
</head>
<body>
  <form action="">
    <ul>
      <li><label for="apple"><input type="checkbox" name="fruits" id="apple" value="apple">apple</label></li>
      <li><label for="orange"><input type="checkbox" name="fruits" id="orange" value="orange">orange</label></li>
      <li><label for="banana"><input type="checkbox" name="fruits" id="banana" value="banana">banana</label></li>
      <li><label for="cherry"><input type="checkbox" name="fruits" id="cherry" value="cherry">cherry</label></li>
    </ul>
    <p><button type="button" id="btn">button</button></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  const btn = document.getElementById('btn');
  const ele = document.getElementsByName('fruits');

  btn.addEventListener('click', function(){
    let arr = [];
    for(let i of ele){
      if(i.checked){
        arr.push(i.value);
      }
    }
    console.log(arr);
  });
}

チェックボックスのチェックを外す

script.js

window.onload = function(){
  const btn = document.getElementById('btn');
  const ele = document.getElementsByName('fruits');

  btn.addEventListener('click', function(){
    for(let i of ele){
      i.checked = false;
    }
  });
}

セレクトボックスの値の取得

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <form action="" name="myform">
    <p>
      <select name="address" id="address">
        <option value="">選択してください</option>
        <option value="東京">東京</option>
        <option value="大阪">大阪</option>
        <option value="福岡">福岡</option>
      </select>
    </p>
    <p><input id="btn" type="button" value="button"></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  let btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    let address = document.getElementById("address");
    let idx = address.selectedIndex;
    let seltxt = address.options[idx].value;
    console.log(seltxt);
  });
};

スライダーの値を取得

input イベントは操作中に値を取得します。change イベントでも値を取得できますが、change イベントの場合は操作が止まった時に値を取得します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
</head>
<body>
  <p><input type="range" min="0" max="100" id="bar"></p>
</body>
</html>

script.js

window.onload = function(){
  let bar = document.getElementById("bar");
  bar.addEventListener("input", function(){
    console.log(this.value);
  });
};