JavaScript getElementsByNameでチェックボックスの値を取得するサンプル

2022年11月25日

環境
Google Chrome　107.0.5304.107
Windows 10 Home 64bit

構文
1.チェックボックス要素を選択します
var 変数名1 = document.getElementsByName(“チェックボックスのname名");
var 変数名2 = 変数名1[0]

2.チェックボックスがONのときの判定処理
if(変数名2.checked){処理コード}

3.セレクトボックスを選択不可にする
document.getElementById(セレクトボックスのID名).setAttribute(“disabled", true);

4.セレクトボックスを選択可能にする
document.getElementById(セレクトボックスのID名).removeAttribute(“disabled");

使用例

<!DOCTYPE html>

<html>

<body>

function funA() {

//　チェックボックス「userid」を取得

　var cft = document.getElementsByName("username");

if (cft[0].checked) {　 // チェックボックスがONのときの処理

//disabled属性を削除

document.getElementById("city").removeAttribute("disabled");

//readOnly属性を削除

document.getElementById("addr").removeAttribute("readOnly");

} else { // チェックボックスがOFFのときの処理

//readonly属性を設定

document.getElementById("addr").setAttribute("readOnly", true);

// disabled属性を削除

document.getElementById("city").setAttribute("disabled", true);

}

</script>

名前:<input type="textbox" id="addr" value="東京" maxlength="5" readOnly><br>

地方: <select id="city" name="city" disabled >

</select>

</body>

</html>

<!DOCTYPE html> <html> <body> <script> function funA() { //　チェックボックス「userid」を取得　var cft = document.getElementsByName("username"); if (cft[0].checked) {　 // チェックボックスがONのときの処理 //disabled属性を削除 document.getElementById("city").removeAttribute("disabled"); //readOnly属性を削除 document.getElementById("addr").removeAttribute("readOnly"); } else { // チェックボックスがOFFのときの処理 //readonly属性を設定 document.getElementById("addr").setAttribute("readOnly", true); // disabled属性を削除 document.getElementById("city").setAttribute("disabled", true); } } </script> 名前:<input type="textbox" id="addr" value="東京" maxlength="5" readOnly><br> 地方: <select id="city" name="city" disabled > <option value="11">東京</option> <option value="22">大阪</option> <option value="33">福岡</option> </select> <p>選択 <input type="checkbox" id="userid" name="username" onchange="funA();"></p> </body> </html>

<!DOCTYPE html>
<html>
<body>

<script>
function funA() {
   //　チェックボックス「userid」を取得
　var cft = document.getElementsByName("username");
 
  if (cft[0].checked) {　    // チェックボックスがONのときの処理
      //disabled属性を削除
       document.getElementById("city").removeAttribute("disabled");
       //readOnly属性を削除
      document.getElementById("addr").removeAttribute("readOnly");
  } else {  // チェックボックスがOFFのときの処理
     //readonly属性を設定
       document.getElementById("addr").setAttribute("readOnly", true);
     // disabled属性を削除
   	 document.getElementById("city").setAttribute("disabled", true);

  }
}
</script>
名前:<input type="textbox" id="addr" value="東京" maxlength="5" readOnly><br>
地方: <select id="city" name="city" disabled >
   <option value="11">東京</option>
   <option value="22">大阪</option>
   <option value="33">福岡</option>
</select>
<p>選択 <input type="checkbox" id="userid" name="username" onchange="funA();"></p>

</body>
</html>

結果

選択チェックボックスのチェックを入れると、テキストボックス「addr」とチェックボックス「userid」を活性にします。

選択チェックボックスのチェックを外すと、テキストボックス「addr」とチェックボックス「userid」を非活性にします。

選択チェックボックスのチェックを入れると、テキストボックス「addr」とチェックボックス「userid」を活性にします。選択チェックボックスのチェックを外すと、テキストボックス「addr」とチェックボックス「userid」を非活性にします。

選択チェックボックスのチェックを入れると、テキストボックス「addr」とチェックボックス「userid」を活性にします。
選択チェックボックスのチェックを外すと、テキストボックス「addr」とチェックボックス「userid」を非活性にします。

JavaScript

Posted by arkgame

関連投稿: