- ベストアンサー
複数あるチェックボックスからひとつだけ選択
よろしくお願いします。 複数あるチェックボックスから常にひとつだけしか選択できないように したく、色々調べてみたところ、下記のようなスクリプトを見つけました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>sample</title> <script type="text/javascript"> var before = null; function test(e) { var tgt = e.srcElement ? e.srcElement: e.target; if (before == tgt && tgt.checkd == true) { tgt.checked = true; } else { var chks = document.getElementsByName('radiolike'); for (var i = 0; i < chks.length; i++) { if (chks[i] != tgt) chks[i].checked = false; } } before = tgt; } </script> </head> <body> <form id="SAMPLE" action="#" onclick="test(event);"> <label for="c1"><input name="radiolike" id="c1" type="checkbox" value="0">Item1</label> <label for="c2"><input name="radiolike" id="c2" type="checkbox" value="1">Item2</label> <label for="c3"><input name="radiolike" id="c3" type="checkbox" value="2">Item3</label> </form> </body> </html> 上記のチェックボックス群を同ページに複数置きたいときは、どのよう にスクリプトを変えたらよいのか分からずとても困っております。 分かりづらい説明で誠に申し訳ありません。 補足説明致しますので、どうかご教授下さいますようお願い致します。
- patsaysnow
- お礼率77% (89/115)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- LegaC2
- ベストアンサー率52% (224/428)
今のプログラムを少し変更して実現すると以下のような感じになります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "?http://www.w3.org/TR/html4/loose.dtd">? <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>sample</title> <script type="text/javascript"> var before = null; function test(e, suffix) { var tgt = e.srcElement ? e.srcElement: e.target; if (before == tgt && tgt.checkd == true) { tgt.checked = true; } else { var chks = document.getElementsByName('radiolike' + suffix); for (var i = 0; i < chks.length; i++) { if (chks[i] != tgt) chks[i].checked = false; } } before = tgt; } </script> </head> <body> <form id="SAMPLE1" action="#" onclick="test(event, '1');"> <label for="a1"><input name="radiolike1" id="a1" type="checkbox" value="0">Item11</label> <label for="a2"><input name="radiolike1" id="a2" type="checkbox" value="1">Item12</label> <label for="a3"><input name="radiolike1" id="a3" type="checkbox" value="2">Item13</label> </form> <body> <form id="SAMPLE2" action="#" onclick="test(event, '2');"> <label for="c1"><input name="radiolike2" id="c1" type="checkbox" value="0">Item21</label> <label for="c2"><input name="radiolike2" id="c2" type="checkbox" value="1">Item22</label> <label for="c3"><input name="radiolike2" id="c3" type="checkbox" value="2">Item23</label> </form> </body> </html>
補足
早速ご回答頂き誠にありがとうございます。 お教え頂いたスクリプトで無事複数のチェックボックス群を同ページに 置く事ができました。ありがとうございます。 チェックボックス郡を配置したいページはCGIを使用したメールフォームでして、 <form>～</form>タグの間にお教え頂いたスクリプトを置きたいと思っています。 お教え頂いたスクリプトはSAMPLE1とSAMPLE2でそれぞれに<form>タグがあ るのですが、これをFORMタグひとつで動作させることはできるものなのでしょうか？ もし差し支えなければ、お教え頂けると幸いです。 よろしくお願い致します。 イメージしているスクリプトです。 <form id="sample" action="./mail.cgi" onclick="test(event, '1');" onSubmit="return Check(this)"> <label for="a1"><input name="radiolike1" id="a1" type="checkbox" value="0">Item11</label> <label for="a2"><input name="radiolike1" id="a2" type="checkbox" value="1">Item12</label> <label for="a3"><input name="radiolike1" id="a3" type="checkbox" value="2">Item13</label> <label for="c1"><input name="radiolike2" id="c1" type="checkbox" value="0">Item21</label> <label for="c2"><input name="radiolike2" id="c2" type="checkbox" value="1">Item22</label> <label for="c3"><input name="radiolike2" id="c3" type="checkbox" value="2">Item23</label> ※submit用のタグです <input type="image" src="img/btn.gif"> </form>
- yambejp
- ベストアンサー率51% (3827/7415)
ラジオボタンはチェックが外せないからいやだということかな？ こんなかんじで・・・ <script> function test(obj) { var f=obj.form; for(var i=0;i<f.length;i++ ){ if(f[i].type=="checkbox" && f[i]!=obj) f[i].checked=false; } } </script> <form id="SAMPLE" action="#"> <label for="c1"><input name="radiolike" id="c1" type="checkbox" value="0" onclick="test(this)">Item1</label> <label for="c2"><input name="radiolike" id="c2" type="checkbox" value="1" onclick="test(this)">Item2</label> <label for="c3"><input name="radiolike" id="c3" type="checkbox" value="2" onclick="test(this)">Item3</label> </form>
お礼
早速ご回答頂きありがとうございました。 実現したいのは、ANo.4でお答え頂いた内容でした。 私の説明不足でご迷惑をおかけ致しました。誠に申し訳ありません。 お教え頂いたスクリプトは私が見つけたスクリプトとはまた違うよ うなので、こちらのスクリプトも参考にさせて頂きたいと思います。 ありがとうございます。
- HIRSYU
- ベストアンサー率51% (45/87)
>複数あるチェックボックスから常にひとつだけしか選択できないように ラジオボタンじゃだめですか？
お礼
早速ご回答頂き誠にありがとうございます。 そうですね。 本来のチェックボックスの使い方ではないので、ラジオボタン の使用も考慮させて頂きたいと思います。ありがとうございました。
- kura07
- ベストアンサー率50% (30/59)
チェックボックスは本来複数選択するものです。 ひとつだけしか選択しないんでしたら、ラジオボタンを使ってみては？？ <form name="SAMPLE"> <input type="radio" name="radiolike" value="0">Item1<br> <input type="radio" name="radiolike" value="1">Item2<br> <input type="radio" name="radiolike" value="2">Item3<br> </form> これだと、JavaScriptがいりませんね＾＾
お礼
早速ご回答頂き誠にありがとうございます。 そうですね。 本来のチェックボックスの使い方ではないので、ラジオボタン の使用も考慮させて頂きたいと思います。 ありがとうございました。
関連するQ&A
- チェックを入れて文字を表示する
javascript初心者です。あつかましい質問で申し訳ありません。 他のページのサンプルを参考にしてチェックを入れた時はにチェックを入れると文字が表示されるチェックボックスを作成しました。更にチェックはひとつしか出来ないというjavascriptも拾ってきて組み合わせたのですが、チェックを付けてとなりにチェックを入れた時はじめに表示された文字が消えません。教えてください。 <script type="text/javascript"> var before = null; function test(e) { var tgt = e.srcElement ? e.srcElement: e.target; if (before == tgt && tgt.checkd == true) { tgt.checked = true; } else { var chks = document.getElementsByName('chkgroup'); for (var i = 0; i < chks.length; i++) { if (chks[i] != tgt) chks[i].checked = false; } } before = tgt; } <!-- function output(){ var str=""; var chkboxes=document.getElementsByName("chkgroup"); for(var i=0;i<chkboxes.length;i++){ var obj=chkboxes[i]; if (obj.checked){//チェックされていたらstrにvalue属性の文字列を追加する str+=obj.value; } } document.getElementById("result").innerHTML=str; } window.onload=function(){ var chkboxes=document.getElementsByName("chkgroup");//チェックボックス(chkgroup)を配 列で取得 for(var i=0;i<chkboxes.length;i++){//ループでチェックボックス全てにイベントハンドラを 設定 chkboxes[i].onclick=output; } }; //--> </script> <title>sample</title> <body> <form id="SAMPLE" action="#" onclick="test(event);"> <label for="chk1"><input name="chkgroup" id="chk1" type="checkbox" value="0">Item1</label> <label for="chk2"><input name="chkgroup" id="chk2" type="checkbox" value="1">Item2</label> <label for="chk3"><input name="chkgroup" id="chk3" type="checkbox" value="2">Item3</label> </form> <p id="result">ここに表示されます。</p> </body>
- 締切済み
- JavaScript
- チェックボックスがIE８で正しく動作しないのはなぜ
下記サンプルコードをIE８やIE７で試してみると、チェックボックスをクリックしても その時点で動かず、ウインドウ上のどこかをクリックしないと動きません。 Firefox, Chrome, IE9ではチェックボックスをクリックした時点で動きます。 どこに問題があるのでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> </head> <body> <form> <ul id="t"> <li><input type="checkbox" name="t_0" onchange="fff()" value="0pt" /><label for="t_0">0pt</label></li> <li><input type="checkbox" name="t_1" onchange="fff()" value="10pt" /><label for="t_1">10pt</label></li> <li><input type="checkbox" name="t_2" onchange="fff()" value="20pt" /><label for="t_2">20pt</label></li> <li><input type="checkbox" name="t_3" onchange="fff()" value="30pt" /><label for="t_3">30pt</label></li> <li><input type="checkbox" name="t_4" onchange="fff()" value="40pt" /><label for="t_4">40pt</label></li> <li><input type="checkbox" name="t_5" onchange="fff()" value="50pt" /><label for="t_5">50pt</label></li> <li><input type="checkbox" name="t_6" onchange="fff()" value="60pt" /><label for="t_6">60pt</label></li> <li><input type="checkbox" name="t_7" onchange="fff()" value="70pt" /><label for="t_7">70pt</label></li> <li><input type="checkbox" name="t_8" onchange="fff()" value="80pt" /><label for="t_8">80pt</label></li> <li><input type="checkbox" name="t_9" onchange="fff()" value="90pt" /><label for="t_9">90pt</label></li> <li><input type="checkbox" name="t_10" onchange="fff()" value="100pt" /><label for="t_10">100pt</label></li> </ul> </form> <table> <tr> <td>サンプル1 ：</td><td>60pt</td> </tr> </table> <table> <tr> <td>サンプル2 ：</td><td>30pt</td> </tr> </table> <table> <tr> <td>サンプル3 ：</td><td>40pt</td> </tr> </table> <script type="text/javascript"> function fff() { var a = new Array; var b = document.getElementById('t').getElementsByTagName("input"); var c = document.getElementsByTagName('table'); for(i=0,len=b.length; i<len; i++){ if(b[i].checked == true){ a[i] = b[i].value; }else{ a[i] = ""; } } for(i=0,len=c.length; i<len; i++){ var d = c[i].getElementsByTagName('td'); var e = d[1].innerHTML; var if1 = a[0]==e || a[1]==e || a[2]==e || a[3]==e || a[4]==e || a[5]==e || a[6]==e || a[7]==e || a[8]==e || a[9]==e || a[10]==e; var if2 = a[0]=="" && a[1]=="" && a[2]=="" && a[3]=="" && a[4]=="" && a[5]=="" && a[6]=="" && a[7]=="" && a[8]=="" && a[9]=="" && a[10]==""; if(if1 || if2){ c[i].style.display = ''; }else{ c[i].style.display = 'none'; } } } </script> </body> </html>
- ベストアンサー
- 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>
- ベストアンサー
- 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
- チェックボックス とラジオボタンの値取得について
チェックボックス とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた２をチェクして男性を選択した場合 「そのた２ 男性」と表示したい。 例 そのた１ そのた２ 男性 そのた４ そのた５ 女性 サンプルのチェックボックスの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
- チェックボックスONでジャンプ
javascript初心者です。 現在チェックボックスをONにすると別の商品のページにジャンプするという シンプルなものを作っているのですが、Chromeではきちんと動作するのに、 その他のブラウザ（firefox opera ie)で動作しません。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function chkClick() { if (formTest.chkTest.checked) { location.href="item123.html"; } } //--> </script> </head> <body> <form act="test.cgi" id="formTest" method="post"> <input type="checkbox" name="chkTest" value="1" onclick="chkClick()"> </form> チェックを入れると商品１２３のページへ </body> どこか記述が間違っているところがありますでしょうか？ ご指摘頂ければ助かります。よろしくお願い致します。
- ベストアンサー
- JavaScript
- checkboxをshiftキーを押しながらクリックすると複数選択する
checkboxをshiftキーを押しながらクリックすると複数選択するソースなのですが、 htmlファイルでは動作するのですが、以下のようにperl(cgiファイル)では複数選択できません。 もしかしたらjavaのコーディングの問題かもしれませんが、行き詰っております。 どなたかご教授お願い申し上げます。 ↓------------------------------------------- #!c:/Perl/bin/perl require 'cgi-lib.pl'; require 'jcode.pl'; print "Content-type: text/html\n\n"; print <<EOM; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.field_j.js"></script> <script type="text/javascript"> var bIsFirebugReady = (!!window.console && !!window.console.log); $(document).ready( function (){ $("#idPluginVersion").text($.Field.version); setLimitSelection(); $('input[name="chkRange"]').createCheckboxRange(function(bChecked){ $("label[for=" + this.id + "]").css("background-color", (bChecked) ? "#ffffff" : ""); }); $("#frmNavigation").autoAdvance(); window.oSelector = $("#selector"); } ); function setLimitSelection(){ $('input[name="chkLimit"]').limitSelection( { limit: 3, onfailure: function (n){ $("#idCheckboxMsg").html( "You can not select more than " + n + " items." ); return false; }, onsuccess: function (n){ $("#idCheckboxMsg").html(""); return false; } } ); $('select[name="selLimit"]').limitSelection(2); } </script> <title>test</title> </head> <body> <form action="" method="post" id="frmCreateCheckboxRange" onsubmit="return false;"> <p> <table> <tr> <td> <input type="checkbox" name="chkRange" id="chkRange_1" value="1" /> </td> <td> <input type="checkbox" name="chkRange" id="chkRange_2" value="2" /> </td> <td> <input type="checkbox" name="chkRange" id="chkRange_3" value="3" /> </td> </tr> </table> </p> </form> </body> </html> EOM ↑------------------------------
- ベストアンサー
- Perl
- チェックボックスの無効化、有効化
あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、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
- チェックボックスが選択されたらファイルを読み込む
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function getChecked(name) { var AllVals = $('input[name="' + name + '"]:checked').map(function() { return this.value; }); AllVals = $.makeArray(AllVals).join('|'); return AllVals; } function getContents(){ var colorId = getChecked('color_id'); var categoryId = getChecked('category_id'); var serviceId = getChecked('service_id'); var http = $.get ( "http://localhost/eigazuki/results/title:/time:0～300/country_id:" + categoryId + "/genre_id:" + serviceId, null, function ( data ) { $("#serviceListSection").html(data); } ) }; $(function(){ $('input[name]:checkbox').change(function(){getContents();}); }); </script> </head> <body> <input type="checkbox" name="color_id" value="1" />赤 <input type="checkbox" name="color_id" value="2" />黒 <br> <input type="checkbox" name="category_id" value="1">男物 <input type="checkbox" name="category_id" value="2">女物 <br> <input type="checkbox" name="service_id" value="1">季節 <input type="checkbox" name="service_id" value="2">お祝い </body> </html> <section id="serviceListSection"></section> というコードを書き、チェックボックスがチェックされるたびに、 http://localhost/eigazuki/results/title:/time:0～300/country_id:" + categoryId + "/genre_id:" + serviceId の外部ファイルを読み込みたいのですが、全く上手くいきませんなにがダメなのでしょうか？ よろしくお願いします！
- 締切済み
- JavaScript
- チェックボックスで複数選択する方法教えて下さい
いつもありがとうございます。 00.PHPというファイルにチェックボックスを配置して複数選択し 同じ00.phpにPOSTで情報送り、表示させたいのですが、 下記の記述では「Array」としか表示されません。 検索結果を最終的にはMYSQLにデータ登録をしたいのですが うまくいきません。御指導お願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>無題ドキュメント</title> </head> <body> <? echo $_POST["working_days"] ?> <form action="00.php" method="post"> <label> <input type="checkbox" name="working_days[1]" value="1"> ド短期1日～OK <input type="checkbox" name="working_days[2]" value="2"> 週2、3日程度 <input type="checkbox" name="working_days[3]" value="3"> 月～金曜日 <input type="checkbox" name="working_days[4]" value="4"> 土日祝日のみ <input type="checkbox" name="working_days[5]" value="5"> 毎日オールフリー</label> <input type="submit" name="Submit" value="登録"> </form> </body> </html>
- ベストアンサー
- PHP
お礼
ご回答頂きありがとうございました。 その後、色々と試してみて、無事動作させることができました。 最後までお付き合い頂き、誠にありがとうございました。