チェックボックスの値取得後の加工について
- チェックボックスの値を取得して加工する方法について解説します。
- JavaScriptの修正を行い、取得した値を指定の形式で出力する方法を紹介します。
- 具体的なコードと実行結果も示していますので、参考にしてください。
- ベストアンサー
チェックボックスの値取得後の加工について
下記のJavaScriptをどうように修正をすれば良いか、 ご教授いただければと思い投稿させて頂きました。 どうぞよろしくお願い申し上げます。 出力ボタンをクリックすると現状では下記のようになります。 【現状】 ------------------------------------------------------ アンケート結果 →回答1 →回答2 希望としては取得した値を下記のように加工をして出力したいと思います。 【希望】 ------------------------------------------------------ アンケート結果 →回答1、回答2 【ソース】 ------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script> function textoutput(formObj) { var checkbox01 = formObj.elements["C01"]; var text = 'アンケート結果' + '\n'; for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i].value; text += '\n'; } } formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・回答結果</strong><br> <table border="0"> <td colspan="2" valign="middle" width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox1-1"> <label for="checkbox1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox1-2"> <label for="checkbox1-2">回答2</label> </td> <table> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- yumi007
- お礼率70% (12/17)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じで <script> function textoutput(f) { var c = f.elements["C01"]; var text = 'アンケート結果' + '\n'; var flg=true; for ( var i = 0; i < c.length; i ++ ) { if( c[i].checked ) { if(flg){flg=false;text+=" →";}else{text+="、";} text += c[i].value; } } f.elements["output"].value=text; } </script> <form> <input type="checkbox" name="C01" value="回答1" id="checkbox1-1"> <input type="checkbox" name="C01" value="回答2" id="checkbox1-2"> <input type="button" value="ログ出力" onClick="textoutput(this.form);"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form>
関連するQ&A
- フォームの制御について
下記２つのJavaScriptについて正しい記述方法について、 どうすれば良いかを模索しています。 アドバイスを頂ければ幸いです。 どうぞ何卒よろしくお願い致します。 1.チェックボックスの値とテキストフォームの値を結合する方法 <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} 2.テキストエリアの値がNullの時に値が出力されないようにする方法 <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' + textarea01 + '\n'; ソース： ----------------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- checkbox01を取得// --> var checkbox01 = formObj.C01; <!-- checkbox02を取得// --> var checkbox02 = formObj.C02; <!-- text01.valueを取得// --> var text01 = formObj.text01.value; <!-- textarea01.valueを取得// --> var textarea01 = formObj.textarea01.value; <!-- textを結合用の変数として準備// --> <!-- チェックボックスの中から選択されているものを取得// --> var text = 'アンケート結果' + '\n'; <!-- C01の中から選択されているものを取得// --> for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i]. value; text += '\n';}} <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' + textarea01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--チェックボックスC01// --> <strong>・回答結果</strong><br /> <table border="0" > <td colspan="2" valign="middle"width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox 1-1" > <label for="checkbox 1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox 1-2" > <label for="checkbox 1-2">回答2</label> </td> <tr> <!--チェックボックスC02// --> <td width="86" valign="middle"> <input type="checkbox" name="C02" value=" →その他：" id="checkbox 1-1" > <label for="checkbox 1-1">その他：</label> </td> <td valign="middle"> <input type="text "name="text01" size="60" /><br> </td> </table> <strong>・回答3：</strong><br /> <textarea name="textarea01" cols="60" rows="1" " tabindex="1" STYLE="ime-mode:active"></textarea><br> <!--結果出力// --> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか？');" /><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックス とラジオボタンの値取得について
チェックボックス とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた２をチェクして男性を選択した場合 「そのた２ 男性」と表示したい。 例 そのた１ そのた２ 男性 そのた４ そのた５ 女性 サンプルのチェックボックスの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
- ラジオボタンが未選択時の制御方法について
たびたびお世話になっております。 Webフォームを思考策後しながら作成しています。 下記のラジオボタン1 とラジオボタン3 は選択して、 ラジオボタン2 は選択せずに出力する下記のように、 ハヌけした書式で出力されます。 ハヌけしないように出力させる方法はありますでしょうか？ ご教授をお願いいたします。 出力結果： ------------------------------------------------------------------------------- 【ラジオボタン1】：回答1 【ラジオボタン3】：回答1 ソース： ------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- radioを取得// --> var radio01 = formObj.A01; <!-- radioを取得// --> var radio02 = formObj.A02; <!-- radioを取得// --> var radio03 = formObj.A03; <!-- textを結合用の変数として準備// --> <!-- A01の中から選択されているものを取得// --> var text = '下記リカバリシートを案内' + '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio01.length; i ++ ) { if ( radio01[i].checked === true ) { text += '【ラジオボタン1】：' + '\n' + radio01[i].value;}} text += '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio02.length; i ++ ) { if ( radio02[i].checked === true ) { text += '【ラジオボタン2】：' + '\n' + radio02[i].value;}} text += '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio03.length; i ++ ) { if ( radio03[i].checked === true ) { text += '【ラジオボタン3】：' + '\n' + radio03[i].value;}} text += '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--ラジオボタン// --> <strong>・ラジオボタン1</strong><br /> <input type="radio" name="A01" value="回答1" id="radio1-1" " tabindex="3"> <label for="radio1-1">回答1</label> <input type="radio" name="A01" value="回答2" id="radio1-2" " tabindex="4"> <label for="radio1-2">回答2</label> <input type="radio" name="A01" value="回答3" id="radio1-3" " tabindex="5"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン2</strong><br /> <input type="radio" name="A02" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A02" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A02" value="回答3" id="radio1-3"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン3</strong><br /> <input type="radio" name="A03" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A03" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A03" value="回答3" id="radio1-3"> <label for="radio1-3">回答3 </label> <br /> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- オブジェクトから値を取得する方法について
QNo.7391687 の続きで質問をもうひとつお願い致します。 いろいろと調べたり、試行錯誤しながら、 erlectオブジェクトの値を取得して、 取得した値の出力をしたいと考えています。 ご教授頂ければ幸いです。 どうぞよろしくお願いいたします。 【ソース】 ------------------------------------------------------- <head> <title>問合せ入力フォーム</title> <script type="text/javascript"> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- selectを取得// --> var select01 = formObj. select01; <!-- textを結合用の変数として準備// --> var text = '【select01】' + '\n'; text += select01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <form name="form01"> <!--セレクトボタン// --> <strong>・OS確認</strong><br /> <select name="select01"> <option value=""> <option value="Windows7">Windows7 <option value="WindowsVista">WindowsVista <option value="WindowsXP">WindowsXP <option value="WindowsMe">WindowsMe <option value="Windows2000">Windows2000 </select> <br> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスが複数ある場合の値取得について
【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>
- ベストアンサー
- JavaScript
- チェックボックスの値を取り出したい
こんにちは 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
- form で、チェックボックスにまとめてチェック
データベースから、データを持ってきて、複数のグループに分けてまとめてチェックを入れようとしています。 複数のチェックボックスがある場合はいいのですが、チェックボックスが一つしかない場合に チェックが入りません。 どの様に変更すれば、一つでもチェックが入るようになるでしょうか？ 以下の様なサンプルコードを見ながら、作成しています。 function AllChecked1(){ var check = document.form.a1.checked; for (var i=0; i<document.form.elements['aa1[]'].length; i++){ document.form.elements['aa1[]'][i].checked = check; } } <form name="form" method="POST" action="select1.php"> <input type="checkbox" name="a1" id="a1" onClick="AllChecked1();" /><label for="a1"> group1 全選択</label> <input type="checkbox" name="aa1[]" id="aa11" value="1" /><label for="aa11">名前1</label><br /> </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- チェックボックスから配列を使って値を受け取る方法
チェックボックスから配列を使って値を受け取る方法について、 以下の通りに試してみたのですが、上手く行かず、 配列$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
- チェックボックスのチェックについて
submit時に一つでもチェックがなければアラートを表示 チェックがあれば進む・・・としたいです。 <form action=next.html name=form1> <input type=checkbox name=checkbox1 value=1> <input type=checkbox name=checkbox2 value=2> <input type=checkbox name=checkbox3 value=3> <input type=checkbox name=checkbox4 value=4> <input type=checkbox name=checkbox5 value=5> ～以下50まで続きます <input type=submit value=submit> </form> function countChecked(form1) { var total = 0; var max = 50; for (var index = 0; index < form1.checkbox.length; index++) { total += form1.checkbox[index].checked ? 1 : 0; } if(countChecked(document.form1)) > 0) { return true; } else { alert("no"); return false; } return(total); } 過去に似たような質問を参考に作ってみましたがダメでした。 チェックボックスの名前の付け方が悪いのでしょうか。
- ベストアンサー
- JavaScript
- チェックボックスの無効化、有効化
あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号（t1、t2、t3やc1、c2、c3）が振られている必要がありますが、 これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか？ nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。 <script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化（false） */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=""; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化（true） */ frm.elements[name+i].disabled=true; } } } </script> <form name="form2" action="#"> <label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="text" name="t1" value="テキストA" size="20" /> <input type="text" name="t2" value="テキストB" size="20" /> <input type="text" name="t3" value="テキストC" size="20" /> <hr /> <label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="checkbox" name="c1" value="1" />選択肢A<br /> <input type="checkbox" name="c2" value="1" />選択肢B<br /> <input type="checkbox" name="c3" value="1" />選択肢C </form>
- ベストアンサー
- JavaScript
お礼
お礼が遅くなり申し訳ございませんでした。 無事、意図することが出来るようになりました。 今後とも、よろしくお願いいたします。