こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

こんにちは。
チェックボックスのグループが複数ある場合に、値取得のロジックをチェックボックスのグループ毎に記述せず、
まとめて1つのロジックで取得できる記述方法はありますでしょうか?


色々と検索しましたが、解決できず何かよい方法があれば教えて頂けないでしょうか。
よろしくお願い致します。



■やりたいこと
・チェックボックスの値取得の記述を1つにまとめたい。

サンプルソースでは、チェックボックスのグループが3つで、チェックボックスの値取得のソースも3つ記述しています。
チェックボックスのグループを50個設置すると、50回値取得のソースを記述することになってしまうので、1つの記述にまとめたいです。


■サンプルソース
<!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>

投稿日時 - 2013-06-25 19:59:14

QNo.8149603

すぐに回答ほしいです

質問者が選んだベストアンサー

冗長すぎていまいち理解できないところもあるので
こんな感じでどうでしょうか?

<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">
1:<input type="checkbox" name="c1" value="1">
<input type="checkbox" name="c1" value="2">
<input type="checkbox" name="c1" value="3">
2:<input type="checkbox" name="c2" value="1">
3:<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>

投稿日時 - 2013-06-26 11:52:48

お礼

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

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

投稿日時 - 2013-07-04 10:48:36

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問