重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

チェックボックスが複数ある場合の値取得について

解決済

  • 質問者：megane5050
  • 質問日時：
  • 回答数：1件

【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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

冗長すぎていまいち理解できないところもあるので


こんな感じでどうでしょうか？

<script>
function func(f){
var txt={"c1":"チェック1","c2":"チェック2","c3":"チェック3"};
var moji="";
for(var i in txt){
var n=f.elements[i];
moji+=txt[i]+":";
if(!n.length){
moji+=((n.checked)?n.value:"未選択")+"\n";
}else{
var temp="";
for(var j=0;j<n.length;j++){
if(n[j].checked){
if(temp!="") temp+="+";
temp+=n[j].value;
}
}
moji+=(temp!=""?temp:"未選択")+"\n";
}
}
alert(moji);
}
</script>
<form>
<p>
ななし：<input type="checkbox" value="1">
１：<input type="checkbox" name="c1" value="1">
<input type="checkbox" name="c1" value="2">
<input type="checkbox" name="c1" value="3">
２：<input type="checkbox" name="c2" value="1">
３：<input type="checkbox" name="c3" value="1">
<input type="checkbox" name="c3" value="2">
<input type="button" value="check" onclick="func(this.form)">
</p>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！
お礼が遅くなりまして、申し訳ありませんでした。

elementsを使うんですね。
かなりすっきりし、助かりました！

通報する
お礼日時：2013/07/04 10:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報