※ ChatGPTを利用し、要約された質問です（原文：チェックボックスが複数ある場合の値取得について）
チェックボックスが複数ある場合の値取得について
このQ&Aのポイント
チェックボックスのグループが複数ある場合に、値取得のロジックをまとめて１つのロジックで取得する方法を紹介します。
サンプルソースでは、チェックボックスのグループが3つで、チェックボックスの値取得のソースも３つ記述しています。チェックボックスのグループを50個設置すると、50回値取得のソースを記述することになってしまうので、１つの記述にまとめたいです。
以下の方法で、チェックボックスの値取得のロジックを１つにまとめることができます。まず、チェックボックスのグループごとにループを回し、選択された値を配列に格納します。最後に、配列の中身を文字列に変換して表示させることで、まとめて値を取得することができます。
【javascript】チェックボックスが複数ある場合の値取得について
こんにちは。
チェックボックスのグループが複数ある場合に、値取得のロジックをチェックボックスのグループ毎に記述せず、
まとめて１つのロジックで取得できる記述方法はありますでしょうか？
色々と検索しましたが、解決できず何かよい方法があれば教えて頂けないでしょうか。
よろしくお願い致します。
■やりたいこと
・チェックボックスの値取得の記述を１つにまとめたい。
サンプルソースでは、チェックボックスのグループが3つで、チェックボックスの値取得のソースも３つ記述しています。
チェックボックスのグループを50個設置すると、50回値取得のソースを記述することになってしまうので、１つの記述にまとめたいです。
■サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<script src="jquery.js"></script>
<style type="text/css">
table {border: solid;}
td{width:150px;}
</style>
<script type="text/javascript" language="JavaScript"><!--
function setVal(obj) {
var formname = obj.form.name;
var radioname = obj.getAttribute("Name");
document.forms[formname]["h"+radioname].value = $("input:radio[name='" + radioname + "']:checked").val();
}
// --></script>
<script type="text/javascript" language="JavaScript"><!--
function disp(obj){
var naiyo02="";
var naiyo03="";
var naiyo04="";
var flag = 0;
//チェックボックス1の値
for(i=0; i<document.forms["test"].checkbox02.length; i++){
if(document.forms["test"].checkbox02[i].checked){
naiyo02 = naiyo02 + "■本日は月曜日:"+ document.forms["test"].hradio00.value + ' ' + document.forms["test"].checkbox02[i].value + '\n';
flag = flag+1;
}}
if(flag == 0){
naiyo02 = "■本日は月曜日:"+ document.forms["test"].hradio00.value + ' ' + "未選択"+ '\n';
}
//チェックボックス2の値
for(i=0; i<document.forms["test"].checkbox03.length; i++){
if(document.forms["test"].checkbox03[i].checked){
naiyo03 = naiyo03 + "■本日は火曜日:"+ document.forms["test"].hradio00.value + ' ' + document.forms["test"].checkbox03[i].value + '\n';
flag = flag+1;
}}
if(flag == 0){
naiyo03 = "■本日は火曜日:"+ document.forms["test"].hradio00.value + ' ' + "未選択"+ '\n';
}
//チェックボックス3の値
for(i=0; i<document.forms["test"].checkbox04.length; i++){
if(document.forms["test"].checkbox04[i].checked){
naiyo04 = naiyo04 + "■本日は水曜日:"+ document.forms["test"].hradio00.value + ' ' + document.forms["test"].checkbox04[i].value + '\n';
flag = flag+1;
}}
if(flag == 0){
naiyo04 = "■本日は水曜日:"+ document.forms["test"].hradio00.value + ' ' + "未選択"+ '\n';
}
str =
naiyo02 +'\n'+
naiyo03 +'\n'+
naiyo04 +'\n';
alert(str);
}
// --></script>
</head>
<body>
<FORM name="test">
<table>
<tr>
<td class="c">
■天気
</td>
<td class="n" >
<label for="radiocheck04"><input type="radio" id="radiocheck04" name="radio00" value="晴れ" onClick="setVal(this);">晴れ</label>
<label for="radiocheck05"><input type="radio" id="radiocheck05" name="radio00" value="曇り" onClick="setVal(this);">曇り</label>
<input type="hidden" name="hradio00" value="未入力"><br>
</td>
</tr>
</table>
<table>
<tr>
<td class="c" >
■月曜日<br> (複数選択可)
</td>
<td class="n" >
<input type="checkbox" name="checkbox02" value="さくら">さくら<br>
<input type="checkbox" name="checkbox02" value="まっちゃ">まっちゃ<br>
<input type="checkbox" name="checkbox02" value="不明"> 不明<br>
</td>
</tr>
</table>
<table>
<tr>
<td class="c" >
■火曜日<br> (複数選択可)
</td>
<td class="n" >
<input type="checkbox" name="checkbox03" value="バニラ">バニラ<br>
<input type="checkbox" name="checkbox03" value="不明"> 不明<br>
</td>
</tr>
</table>
<table>
<tr>
<td class="c" >
■火曜日<br> (複数選択可)
</td>
<td class="n" >
<input type="checkbox" name="checkbox04" value="いちご">いちご<br>
<input type="checkbox" name="checkbox04" value="ミント">ミント<br>
<input type="checkbox" name="checkbox04" value="バニラ">バニラ<br>
<input type="checkbox" name="checkbox04" value="不明"> 不明<br>
</td>
</tr>
</table>
<input type="button" value="確認" onclick="javascript:disp(this.form)">
</Form>
<body>
</html>
お礼
ありがとうございます！！ お礼が遅くなりまして、申し訳ありませんでした。 elementsを使うんですね。 かなりすっきりし、助かりました！