チェックボックスが複数ある場合の値取得について
- チェックボックスのグループが複数ある場合に、値取得のロジックをまとめて１つのロジックで取得する方法を紹介します。
- サンプルソースでは、チェックボックスのグループが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>
- megane5050
- お礼率85% (30/35)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
冗長すぎていまいち理解できないところもあるので こんな感じでどうでしょうか？ <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>
関連するQ&A
- チェックボックスの値について
こんばんは。 チェックボックスの値の加工で悩んでいます。 【やりたいこと】 チェックボックスのvalueを加工し表示しています。 重複している文言は表示しないようにしたいです。 現在の値を変数に入れておいて、forの中で判定させる？のでしょうか？ 参考URL等あれば教えていただけませんでしょうか？ よろしくお願いいたします。 【現状valueの値を下記のように表示しています。】 ■日本北海道 ××区 ・ああ町 ■日本北海道 ××区 ・いい町 ■日本北海道 ××区 ・うう町 ■日本北海道 ＹＹ区 ・ええ町 ■日本東京都 ＹＹ区 ・ＡＡ町 ■日本東京都 ＹＹ区 ・ＢＢ町 ■日本東京都 ＺＺ区 ・ＢＢ町 ■日本東京都 ＺＺ区 ・ＢＢ町 【こんな感じで重複している文言は表示しないようにしたいです。】 ■日本北海道 ××区 ・ああ町 ・いい町 ・うう町 ■日本北海道 ＹＹ区 ・ええ町 ■日本東京都 ＹＹ区 ・ＡＡ町 ・ＢＢ町 ■日本東京都 ＺＺ区 ・ＢＢ町 ●if1つ前の値と比較して、重複を消せるかと思ったのですがうまくいきませんでした。 function textcopy(){ var word01; var word02; var word03; var word04; naiyo = ''; for(i=0; i<document.f.a1.length; i++){ if(document.f.a1[i].checked){ source = (document.f.a1[i].value); kekka = source.split("*"); if((kekka[0])==(word01)){ kekka[0]=""; } if((kekka[1])==(word02)){ kekka[1]=""; } if((kekka[2])==(word03)){ kekka[2]=""; } naiyo = naiyo + kekka[0] + kekka[1] +'\n'+' ' + kekka[2] +'\n'+ ' '+ '・'+ kekka[3] + '\n'; word01= kekka[0]; word02= kekka[1]; word03= kekka[2]; word04= kekka[3]; } } document.f.log.value = naiyo ; } 【サンプルソース】 <!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"> <title></title> <script type="text/javascript" language="JavaScript"></script> <SCRIPT TYPE="text/javascript"> <!-- function textcopy(){ naiyo = ''; for(i=0; i<document.f.a1.length; i++){ if(document.f.a1[i].checked){ source = (document.f.a1[i].value); kekka = source.split("*"); naiyo = naiyo + kekka[0] + kekka[1] +'\n'+' ' + kekka[2] +'\n'+ ' '+ '・'+ kekka[3] + '\n'; } } document.f.log.value = naiyo ; } --> </SCRIPT> </head> <body> <form name="f"> <input type="checkbox" name="a1" value="■日本*北海道*××区*ああ町">ああ町<br> <input type="checkbox" name="a1" value="■日本*北海道*××区*いい町">いい町<br> <input type="checkbox" name="a1" value="■日本*北海道*××区*うう町">うう町<br> <input type="checkbox" name="a1" value="■日本*北海道*ＹＹ区*ええ町">ええ町<br> <input type="checkbox" name="a1" value="■日本*東京都*ＹＹ区*ＡＡ町">ＡＡ町<br> <input type="checkbox" name="a1" value="■日本*東京都*ＹＹ区*ＢＢ町">ＢＢ町<br> <input type="checkbox" name="a1" value="■日本*東京都*ＺＺ区*ＢＢ町">ＢＢ町<br> <input type="checkbox" name="a1" value="■日本*東京都*ＺＺ区*ＣＣ町">ＣＣ町<br> <input type="button" value="確認" onclick="textcopy()"><br> <textarea name="log" rows="21" cols="84" id="image1"> </textarea> </form> </body> </html>
- ベストアンサー
- JavaScript
- 複数のチェックボックスをチェックしたい
質問させてください。 複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。 <table> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />a</li> <li><input type="checkbox" name="" value="" />b</li> <li><input type="checkbox" name="" value="" />c</li> <li><input type="checkbox" name="" value="" />d</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />e</li> <li><input type="checkbox" name="" value="" />f</li> <li><input type="checkbox" name="" value="" />g</li> <li><input type="checkbox" name="" value="" />h</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />i</li> <li><input type="checkbox" name="" value="" />j</li> <li><input type="checkbox" name="" value="" />k</li> <li><input type="checkbox" name="" value="" />l</li> </td> </tr> </table> 上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、 そこに該当するチェック項目は全てチェックorチェックを外す っという挙動の実装を考えています。 jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。 ググって $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('checked','checked'); }else{ $('#check input').removeAttr('checked'); } }); }); このソースを見つけたのですが、これだと一つの項目でしか実装できず 項目分このjqueryを書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。
- ベストアンサー
- JavaScript
- チェックボックスの全選択/解除について
お尋ねします。 チェックボックスの全選択/解除について １画面にチェックボックスのグループが複数（store、item）あります。 下記のソースだと【store】の全選択を押下すると【store】【item】両方とも 全選択状態になります。 【store】の全選択/全解除は【store】のみ 【item】の全選択/全解除は【item】のみにしたいのですが どのようにするとよろしいのでしょうか？ よろしくお願いします。 <SCRIPT TYPE="text/javascript"> <!-- function allcheck(targetForm,flag){ for(n=0;n<=targetForm.length-1;n++){ if(targetForm.elements[n].type == "checkbox"){ targetForm.elements[n].checked = flag; } } } --> </SCRIPT> <table width="70%" align = "center" cellspacing="0"> <form action="confirm.php" method="post" target="_blank"> <tr> <td align="center"> <input type="checkbox" name="store[]" value="1" />A店<br/> <input type="checkbox" name="store[]" value="2" />B店<br/> <input type="checkbox" name="store[]" value="3" />C店<br/> <input type="checkbox" name="store[]" value="4" />D店<br/> <input type="checkbox" name="store[]" value="5" />E店<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> <td align="center"> <input type="checkbox" name="item[]" value="1" />項目１<br/> <input type="checkbox" name="item[]" value="2" />項目２<br/> <input type="checkbox" name="item[]" value="3" />項目３<br/> <input type="checkbox" name="item[]" value="4" />項目４<br/> <input type="checkbox" name="item[]" value="5" />項目５<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> </tr> <tr align="center"> <td colspan="4"> <input type="submit" name="con" value="確認"> </td> </tr> </form> </table>
- 締切済み
- PHP
- チェックボックスから配列を使って値を受け取る方法
チェックボックスから配列を使って値を受け取る方法について、 以下の通りに試してみたのですが、上手く行かず、 配列$fCに値が入りません。 どなたか原因を教えていただけないでしょうか。 ------------------------------------------------ hoge.html <form action="hoge.php"> <input type="checkbox" name="fC[]" value="hoge"> hoge <br> <input type="checkbox" name="fC[]" value="foo"> foo <br> <input type="checkbox" name="fC[]" value="bar"> bar <br> <input type="submit" value="OK"> </form> ---------------------------------------------------------- ------------------------------------------------- hoge.php <? for( $i=0; $i<count($fC); $i++ ) { print $i ." ::: " . $fC[$i] . "<br>\n"; } ?> ----------------------------------------------------------
- ベストアンサー
- PHP
- チェックボックス とラジオボタンの値取得について
チェックボックス とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた２をチェクして男性を選択した場合 「そのた２ 男性」と表示したい。 例 そのた１ そのた２ 男性 そのた４ そのた５ 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか？ labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は１個ですが、 □が３０個以上 のチェックボックスが５０個くらいあるので、 １回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する のようにできるのでしょうか？ 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript"> <!-- function textb(){ var str=""; var vals = document.forms['f'].elements['q1']; for(i=0; i<vals.length; i++){ if(vals[i].checked){ str=str + vals[i].value + '\n'; } } document.f.log.value=str; } --> </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>
- ベストアンサー
- JavaScript
- 複数あるチェックボックスの入力チェックするには？
チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。 <!-- <script type="text/javascript"> function chNull(msg,obj) { if(!obj) return true; if((obj.type || obj[0].type) == 'checkbox'){ var flag = 0; if(obj.length){ for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; } } else { if(obj.checked) flag = 1; } if(flag == 0) { alert(msg + 'を選択してください。'); return false; } } return true; } --> </script> <form method="POST" action="■.cgi" onSubmit="return chNull('チェックボックス',a);"> <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 </form> 同じnameのチェックボックス群がひとつしかないときはこれで問題ないのですが、 下記のようにnameが複数ある場合にはこのスクリプトのどの部分を変えればよいのでしょうか？ <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 <input type="checkbox" name="b" value="B1" />B1 <input type="checkbox" name="b" value="B2" />B2 <input type="checkbox" name="c" value="C1" />C1 <input type="checkbox" name="c" value="C2" />C2 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- チェックボックスの値の取得
初歩的なことがわかりません。 チェックボックスをクリックしたときに、そのチェックボックスの値(Value)を取得する方法をアドバイス下さい。 <SCRIPT language=JavaScript> function test() alert(★)←この辺をうまく書きたい。 </SCRIPT> <INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="玄関" onclick="test()">玄関<BR> <INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="トイレ" onclick="test()">トイレ<BR> 「玄関」をクリックすると「玄関です」とalert 「トイレ」をクリックすると「トイレです」とalert 他のチェックボックスにチェックが入っているかは無視。クリックしたチェックボックスのvalueをalert。 下記質問の作業の初めの段階でつまづいています。 (^^; http://www.okweb.ne.jp/kotaeru.php3?q=387758
- ベストアンサー
- JavaScript
- domでの削除
チェックボックスを使ってループで回しながらTRを削除しようとしているんですが、連続でチェックするとうまくいきません。 ご教授宜しくお願いします。 function test() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "checkbox" && inputs[i].checked) { tb1.deleteRow(i); } } }; <table border="1" id="tb1"> <tr> <td><input type="checkbox" name="flag" value=""></td> <td>0</td> </tr> ・ ・ ・ <tr> <td><input type="checkbox" name="flag" value=""></td> <td>9</td> </tr> </table> <input type="button" value="削除" onclick="test();"><br> }
- ベストアンサー
- JavaScript
- チェックボックスによる検索（複数チェックの場合）
プログラム超初心者です。色々なサイトを検索し参考にしたのですがどうしても結果が得られないため投稿させていただきました。（似たようなものは多かったのですがわかりませんでした。） チェックボックスにて複数チェックされる可能性があるものをMYSQLより検索をかけ結果を表示したいと思っております。 地域：□北海道、□東北、□関東、□北陸、□中部、 ジャンル：□イタリアン、□アジアン料理、□洋食、□すべて 以上にチェックをいれてもらったものに対し検索結果画面をだす予定です。 検索をかけるhtml画面は以下のように致しました。 <form method="POST" action="search.php"> <input name="area[]" type="checkbox" value="0"/>北海道<br> <input name="area[]" type="checkbox" value="1"/>東北<br> <input name="area[]" type="checkbox" value="2"/>関東<br> <input name="area[]" type="checkbox" value="3"/>北陸<br> <input name="area[]" type="checkbox" value="4"/>中部<br> <input name="genre[]" type="checkbox" value="a"/>イタリアン<br> <input name="genre[]" type="checkbox" value="b"/>アジア料理<br> <input name="genre[]" type="checkbox" value="c"/>洋食<br> <input name="genre[]" type="checkbox" value="g"/>すべて<br> <input type="submit" name="bottun1" value="入 力"> PHPで$変数名a = $_POST["area"];と$変数名b = $_POST["genre"]; とし配列 foreach関数を使うのでは・・・とまで考えたのですがその後どうすればよいかわかりません。こんなにわからない状態でお伺いするのは恥ずかしいのですがお知恵を頂きたく投稿させていただきました。 お忙しいかと思いますがどうか宜しくお願いいたします。
- ベストアンサー
- PHP
- チェックボックスの値を取り出したい
こんにちは JavaScript初心者です。 過去ログを見ながらここまでやったのですが、何も表示されません。 ？マークの所で引っかかっていると思うのですがどなたかご教授願います。 やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが．．． ３つチェックされていてＯＫをクリックした時に、ABC と出てくるのが理想です。 <html> <SCRIPT LANGUAGE="JavaScript"> <!-- function chkform() { for(i=1; i<=3; i++) { chkdata(i) = document.form0.chk(i).Value ？ var aa = chkdata(i) document.write(aa) } } //--></SCRIPT> <FORM onSubmit="return chkform(this)" name = "form0"> <INPUT type="checkbox" name="chk" value="A" > <INPUT type="checkbox" name="chk" value="B" > <INPUT type="checkbox" name="chk" value="C" > <INPUT type="submit" value="ＯＫ" > </form> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございます！！ お礼が遅くなりまして、申し訳ありませんでした。 elementsを使うんですね。 かなりすっきりし、助かりました！