JavaScript ラジオボタンのチェックを付ける(外す)サンプル

環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit

構文
1.フォームのname「frmcity」とラジオボタンのname「city」で対象を特定します
const 変数名=document.frmcity.city;

2.ラジオボタンにチェックが入れます
変数名[ラジオボタンのインデックス].checked = true

3.ラジオボタンにチェックを外す
変数名[ラジオボタンのインデックス].checked = false

使用例

<!DOCTYPE html>
<html>
<body>

<p>選択した都市の名前 <span id="cft"></span></p>
<form name="frmcity">
  <input type="radio" name="city" value="tokyo"  /> 東京
  <input type="radio" name="city" value="oosaka" /> 大阪
  <input type="radio" name="city" value="fukuoka" /> 福岡
</form>
<p><input type="button" value="操作1" onclick="funA()" /></p>
<p><input type="button" value="操作2" onclick="funB()" /></p>

<script>
  function funA() {
    /*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
    const city=document.frmcity.city;
    /* ラジオボタンのname「city」で対象を特定*/
    city[2].checked = true;
  }
  function funB(){
    /*フォームの「frmcity」とラジオボタンの「city」で対象を特定*/
    const city=document.frmcity.city;
    /* 各項目に対してcheckedをfalseにしてチェックを外す*/
    for( let i=0;i<city.length;i++){
       city[i].checked = false;
    }
  }
</script>

</body>
</html>

実行結果
[操作1]ボタンを押すと、ラジオボタン「福岡」にチェックが入れます。
「操作2」ボタンを押すと、ラジオボタンのチェックが外れます。

JavaScript

Posted by arkgame