• ベストアンサー
  • すぐに回答を!

チェックボックスの表示・非表示 動作

はじめまして。 初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。 今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB=AB A+AB+E=ABE 個々までは問題なし。 既に全てのチェックが付いた上体で、ABCE-A=BCE となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。 以下に現在のコードを張ります。 <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='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数714
  • ありがとう数3

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

  • ベストアンサー
  • 回答No.1

かなり(script部分は全面)変えちゃったけどサンプルです。 HTML部分の変更ポイントは 各inputをpでグループ化した事。 制御用inputのvalueに制御対象の記号を入れたこと。 scriptは全面入れ替えだけど ポイントはグローバル変数(FLAG)にチェックの入った数を持たせた事。 (用途としてはFLAGというよりCOUNTERだけど、FLAGって名前で作り始めちゃったので…) <html> <head> <title></title> <script type="text/javascript"> <!-- // 制御用フラグ // 0なら対象グループは無効(disabled)、1以上なら有効 var FLAG = { 'A':0, 'B':0, 'C':0, 'E':0 }; // 初期化 window.onload = function(){ var controlList = document.getElementById('CONTROL_FLAG').getElementsByTagName('input'); for(var i=0;controlList[i];i++){ if(controlList[i].checked){ var nameList = controlList[i].value.split(/,/); for(var j=0;nameList[j];j++){ FLAG[ nameList[j] ]++; } } } for(var x in FLAG) { fchk2_sub(x); } } // チェックが変更されたら function fchk2(obj) { nameList = obj.value.split(/,/); for(var i=0;nameList[i];i++) { if(obj.checked) { FLAG[nameList[i]]++; } else { FLAG[nameList[i]]--; } fchk2_sub(nameList[i]); } } // disableの変更 function fchk2_sub(groupe_name,dsiabled_value){ var inputList = document.getElementById('GROUPE_'+groupe_name).getElementsByTagName('input'); for(var i=0;inputList[i];i++) { inputList[i].disabled = FLAG[groupe_name]>0?false:true; } } //--> </script> </head> <body> <form name='form2' action='#'> <p id="CONTROL_FLAG"> <input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' checked>A<br> <input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' checked>AとB<br> <input type='checkbox' name='chk1' value='A,E' onclick='fchk2(this);' checked>AとE<br> <input type='checkbox' name='chk2' value='C,E' onclick='fchk2(this);' checked>CとE<br> </p> <p id="GROUPE_A"> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> </p> <p id="GROUPE_B"> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> </p> <p id="GROUPE_C"> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> </p> <p id="GROUPE_E"> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </p> </form> </body> </html>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございました。 とても助かりました。

質問者からの補足

素早いご回答ありがとうございます。 いただいたサンプルソースにて、考えていた動作が実現できました。 しかし実際に表示してみたところ、下部の選択肢部分が非常に多量であったため 上部で選択するまでは、非表示にしたいと思い、 下記選択部分をdivで囲い、CSSでdisply:noneを設定し、 下記スクリプトを追加してみました。 ~ for(var i=0;inputList[i];i++) { inputList[i].disabled = FLAG[groupe_name]>0?false:true; //ここから var tableList = document.getElementById('GROUPE_'+groupe_name).getElementsByTagName('table'); if(FLAG[groupe_name] > 0) tableList.style.disply = 'block'; else tableList.style.disply = 'none'; //ここまで } } が動きませんでした。 誠に恐れ入りますが、あわせて表示/非表示を切り替えるには、 どのようにしたらよいか、またご相談に乗ってくれますでしょうか?。 よろしくお願いいたします。

関連するQ&A

  • チェックボックスの無効化、有効化

    あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、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>

  • selectメニューによるチェックボックスの表示・非表示

    リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。 下記コードの上部チェックボックスがselectメニューになっているようなものです。 JavaScriotに関して未熟者ですので、どなたか参考になるご意見/回答を頂けませんでしょうか?宜しくお願いいたします。 <html> <head> <title></title> <script type="text/javascript"> <!-- // 制御用フラグ // 0なら対象グループは無効(disabled)、1以上なら有効 var FLAG = { 'A':0, 'B':0, 'C':0, 'E':0 }; // 初期化 window.onload = function(){ var controlList = document.getElementById('ctr_FLAG').getElementsByTagName('input'); for(var i=0;controlList[i];i++){ if(controlList[i].checked){ var nameList = controlList[i].value.split(/,/); for(var j=0;nameList[j];j++){ FLAG[ nameList[j] ]++; } } } for(var x in FLAG) { fchk2_sub(x); } } // チェックが変更されたら function fchk2(obj) { nameList = obj.value.split(/,/); for(var i=0;nameList[i];i++) { if(obj.checked) { FLAG[nameList[i]]++; } else { FLAG[nameList[i]]--; } fchk2_sub(nameList[i]); } } // disableの変更 function fchk2_sub(groupe_name,dsiabled_value){ var inputList = document.getElementById('gr_'+groupe_name).getElementsByTagName('input'); for(var i=0;inputList[i];i++) { inputList[i].disabled = FLAG[groupe_name]>0?false:true; } } //--> </script> </head> <body> <form name='form2' action='#'> <p id="ctr_FLAG"> <input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' > Aをアクティブに<br> <input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' > AとBをアクティブに<br> <input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'> AとBとCをアクティブに<br> <input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'> AとBとCとDをアクティブに</p> <p>=====================</p> <p id="gr_A"> <input type='checkbox' name='a1' value='1'> 選択肢A<br> <input type='checkbox' name='a2' value='1'> 選択肢A<br> <input type='checkbox' name='a3' value='1'> 選択肢A<br> </p> <p id="gr_B"> <input type='checkbox' name='b1' value='1'> 選択肢B<br> <input type='checkbox' name='b2' value='1'> 選択肢B<br> <input type='checkbox' name='b3' value='1'> 選択肢B<br> </p> <p id="gr_C"> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> </p> <p id="gr_E"> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </p> </form> </body> </html>

  • ドロップダウンメニューで選択された内容通りにチェックを入れるJS

    ドロップダウンメニューで選択された内容通りにチェックを入れるJS をご教示下さい。 なお、本番環境で対象とするチェックボックスのnameは、全てchkで始まっている法則性があります。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> <!-- // --> </script> </head> <body> <form> <select name="myselect"> <option selected>全てにチェック</option> <option>全てチェック解除</option> <option>奇数だけチェック</option> <option>偶数だけチェック</option> <option>1、6、8番だけチェック</option> <option>3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番 </form> </body> </html>

その他の回答 (1)

  • 回答No.2

#1です。 HTML部分が不明(突然tableだてきたし)なので具体的なコードは出せませんが、とりあえず間違ってるのは、 ・getElementsByTagNameは(結果が例え一つでも)配列を得るメソッドなので、 tableList.style.disply = ~ は誤りです。 tableが必ず一つなら tableList[0].style.disply = ~ で、配列の一つ目を制御できます。 更に、tableはdivなんかと違って特殊な構造をしているのでdisplay属性は'block'ではなく'table'としないと表示が崩れます。 ただし、標準仕様に忠実な多くのブラウザではこうなんですが IEだけはこの部分が標準と違っていてやはり'block'/'none'でないと動作しません。ブラウザの種類を判別して設定する値を変える必要があります。 と、いうか、わざわざid="GROUPE_?"配下のtableを見つけて制御するのではなく、 id="GROUPE_?"のstyleの切り替えでできませんかね??

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございました。 steel_grayさんのおかげで解決できました。

関連するQ&A

  • java script フォームのチェックボックス入力制限について

    java script フォームのチェックボックス入力制限について どなたかお教えください。 以下のコードを書き換えて、現状では1つのチェックボックスを複数にし(かつ、複数選択可にし)、チェックボックスをチェックした場合のみ「選択肢」ラジオボタンがアクティブになる仕様にしたいと考えております。 サイト上で見つけたサンプルコードをいじっているのですが、何分素人なのでうまく行きません。どなたか助けていただけると助かります。 よろしくお願いします。 <script type="text/javascript"> function fchk3(obj){ var frm=obj.form; var len=frm.elements.length; if(obj.checked==true){ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].disabled=false; } } }else{ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].checked=false; frm.elements[i].disabled=true; } } } } </script> <form name="form3" action="#"> <label for="chk3"><input type="checkbox" id="chk3" name="chk3" onclick="fchk3(this)" checked="checked" />このボタンのチェックを外すとラジオボタンが無効化</label><br /> <label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1" />選択肢</label> </form>

  • ラジオボタンとチェックボックスの計算について

    ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">&#65374;</script>の間が間違っていると思うのですがどうでしょうか? 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。(複数選択可)<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色?<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか?<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年&#65374;10年<br> <input name="ch6" value="3" type="radio">9年&#65374;5年<br> <input name="ch6" value="1" type="radio">4年&#65374;3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>

  • チェックボックスの全選択

    <input type="checkbox" name="chk" value=1> <input type="checkbox" name="chk" value=2> <input type="checkbox" name="chk" value=3> <input type="checkbox" name="chk" value=4> <input type="checkbox" name="chk" value=5> このように同一名称のチェックボックスに対して ボタンを押下された時全てのチェックボックスを チェックするJavaScriptの 書き方を教えて貰えないでしょうか

  • 大量のcheckboxにcheckedを入れる

    チェックボックスが50個あります。 送信ボタンを押して元のページを再度開きます。 そのときにチェックしたボックスにチェックを入れた状態にしたいです。 inputタグの中に<?php if(isset($checkbox2) && in_array('b2',$checkbox2)){echo ' checked';} ?>を入れていますが単調になってしまいます。 単調にならずにする方法はありますか? <input type="checkbox" name="chk1[]" value="a1" />の場合はインデックスが固定でないのでできませんでした。 その他いけない箇所があれば教えて下さい。 お願いします。 <?php if(isset($_GET["chk1"])){ $checkbox1 = $_GET["chk1"]; for($i=0; $i<sizeof($checkbox1); $i++){ print $checkbox1[$i]."<br />"; } } if(isset($_GET["chk2"])){ $checkbox2 = $_GET["chk2"]; foreach($checkbox2 as $key => $val){ print $val."<br />"; } } ?> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form method="get" action="checkbox.php"> <input type="checkbox" name="chk1[]" value="a1" /> <input type="checkbox" name="chk1[]" value="a2" /> <input type="checkbox" name="chk1[]" value="a3" /> <input type="checkbox" name="chk1[]" value="a4" /> <input type="checkbox" name="chk1[]" value="a5" /> <input type="checkbox" name="chk1[]" value="a6" /> <input type="checkbox" name="chk1[]" value="a7" /> <input type="checkbox" name="chk1[]" value="a8" /> <input type="checkbox" name="chk1[]" value="a9" /> <input type="checkbox" name="chk1[]" value="a10" /> <br /> <input type="checkbox" name="chk2['b1']" value="b1" <?php if(isset($checkbox2) && in_array('b1',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b2']" value="b2" <?php if(isset($checkbox2) && in_array('b2',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b3']" value="b3" <?php if(isset($checkbox2) && in_array('b3',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b4']" value="b4" <?php if(isset($checkbox2) && in_array('b4',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b5']" value="b5" <?php if(isset($checkbox2) && in_array('b5',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b6']" value="b6" <?php if(isset($checkbox2) && in_array('b6',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b7']" value="b7" <?php if(isset($checkbox2) && in_array('b7',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b8']" value="b8" <?php if(isset($checkbox2) && in_array('b8',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b9']" value="b9" <?php if(isset($checkbox2) && in_array('b9',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b10']" value="b10" <?php if(isset($checkbox2) && in_array('b10',$checkbox2)){echo ' checked';} ?>/> <br /> <input type="submit" value="送信" /> </form> </body> </html>

    • 締切済み
    • PHP
  • 送信後のチェックボックスの表示

    最初の画面でAにチェックされているとします。 そのあとに、AとBをチェックしたあとにSubmitで送信します。 送信したあとに、AとBにチェックした最初の画面を表示させたいときは、 どんな風にすればよいのでしょうか。 今は・・・ If Request.Form="" <input type="checkbox" name="test" value="A" checked>A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C">C Else Select Request.Form("test") Case "A" <input type="checkbox" name="test" value="A" checked>A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C">C Case "B" <input type="checkbox" name="test" value="A">A <input type="checkbox" name="test" value="B" checked>B <input type="checkbox" name="test" value="C">C Case "C" <input type="checkbox" name="test" value="A">A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C" checked>C   ・・・ End Select End If というように、全ての場合のときに"checke"をつけて表示させています。 もっと、効率のよい書き方はないものでしょうか?

  • javascriptでチェックボックスの選択状況をチェックする方法につ

    javascriptでチェックボックスの選択状況をチェックする方法について質問です。 チェックボックスを <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> のようにした場合、チェックボックスが1か所以上選択されているかどうかは、 var count = 0; for (var i=0;i<document.myform.elements['chk[]'].length;i++){ if(document.myform.elements['chk[]'][i].checked){ count++; } } if(count==0){ window.alert("チェックしてください!"); } のようにすればチェック可能ですが、inputタグで <input type="checkbox" name="chk1[]" value="1"> <input type="checkbox" name="chk1[]" value="2"> <input type="checkbox" name="chk2[]" value="A"> <input type="checkbox" name="chk2[]" value="B"> のように「name」の配列名が変化する場合はどのようにすればチェック可能でしょうか?

  • CGIでチェックボックスを使う方法

    チェックボックスをCGI(C言語)で使用する方法を教えて下さい。 例えば、HTMLで <input type="checkbox" name="Check1" value="Sel11" /> チェック1 選択1<br /> <input type="checkbox" name="Check1" value="Sel12" /> チェック1 選択2<br /> <input type="checkbox" name="Check1" value="Sel13" /> チェック1 選択3 <hr /> <input type="checkbox" name="Check2" value="Sel21" checked /> チェック2 選択1<br /> <input type="checkbox" name="Check2" value="Sel22" /> チェック2 選択2<br /> <input type="checkbox" name="Check2" value="Sel23" checked /> チェック2 選択3 というプログラムはCGI(C言語)ではどの様に記述すれば良いでしょうか?

    • ベストアンサー
    • CGI
  • 一つのチェックボックスでテキストフィールドとプルダウンリストを制御

    現在以下のようなテキストフィールドとプルダウンがあります。 <form name="register" action="register_kakunin.php" method="post"> <input type="checkbox" name="name_check" onclick="fchk(this,1);" /> <input name="revenue" onChange="keisan()" type="text" id="revenue" size="6" readOnly="true"/> <input type="checkbox" name="chk" onclick="fchk2(this)" /> <select name="paymethod" disabled="disabled"> <option value="">Pay Method</option> <option value="cash">cash</option> <option value="card">card</option> <option value="point">point</option> <option value="coupon">coupon</option> </select> </form> これを function fchk(obj, name_check){ var frm=document.register; if(!obj.checked){ /* チェックされたら、テキストボックスを有効化 */ frm.revenue.readOnly=true; }else{ /* チェックが外されたら、テキストボックスを無効化 */ frm.revenue.readOnly=false; } } function fchk2(obj) { var frm=obj.form; var len=frm.elements.length; /* フォームの要素数 */ if(obj.checked==true){ /* チェックボックスが選択されている場合、   プルダウンを有効化(disabled=false) */ frm.elements["paymethod"].disabled=false; }else{ /* チェックボックスが選択されていない場合、   プルダウンを無効化(disabled=true) */ frm.elements["paymethod"].disabled=true; } } という2つのスクリプトで制御しているのですが、前者を操作するときには必ず後者も操作することになるため、一つのチェックボックスで2つとも制御できるようにしたいのですが、どうしたらいいのでしょうか? 上記のjavascriptはネットから拾ってきたもので、自作ではありません。 宜しくお願いします。

  • チェックボックスで画像を一括表示

    下記サイトを参照して、 「チェックボックスのON / OFFで画像を表示する」 「全てのチェックボックスのON / OFFを切り替える」 を組み合わせて、 「全てのチェックボックスのON / OFFを切り替えて画像の一括表示」をしたいのですが、全てのチェックボックスのON / OFFの切り替えはできるのですが、それに伴って画像の表示・非表示までは反応しませんでした。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。 http://iswebmag.hp.infoseek.co.jp/sample163.html http://iswebmag.hp.infoseek.co.jp/sample164.html ▼htmlソースです。 <FORM name="f1"> <INPUT type=checkbox name="f1" onClick="show(0,'img01')">朝焼に輝く星<BR> <INPUT type=checkbox name="f1" onClick="show(1,'img02')">木立の隙間から<BR> <INPUT type=checkbox name="f1" onClick="show(2,'img03')">夜明け<BR> <INPUT type=checkbox name="f1" onClick="show(3,'img04')">自転を感じる<BR> <INPUT type=checkbox name="f1" onClick="show(4,'img05')">昼の星空<BR> <INPUT type=checkbox name="f1" onClick="show(5,'img06')">砂丘の月<BR> <INPUT type=checkbox name="f1" onClick="show(6,'img07')">月の軌跡<BR> <INPUT type=checkbox name="f1" onClick="show(7,'img08')">彗星の飛来<BR> <INPUT type=checkbox name="f1" onClick="show(8,'img09')">彗星 <BR> <INPUT type=button value="全てOn" onClick="all_on(this.form.f1)"> <INPUT type=button value="全てOff" onClick="all_off(this.form.f1)"> </FORM> ▼チェックボックスのON / OFFで画像を表示するJavaScript <SCRIPT language="JavaScript"> <!-- function show(c,img){ if(document.f1.elements[c].checked == true){ document.getElementById(img).style.width=200; } else { document.getElementById(img).style.width=0; } } // --> </SCRIPT> ▼全てのチェックボックスのON / OFFを切り替えるJavaScript <SCRIPT language="JavaScript"> <!-- function all_on(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = true; } } function all_off(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = false; } } // --> </SCRIPT>

  • チェックボックスのjavascriptについて

    javascript初心者です! お力をお借りしたいと思い質問いたしました。 宜しくお願い致します。 ●やりたい事 ・チェックボックスがチェックされてない時に「商品を選択して下さい」のアラートを表示させ、1つでもチェックされていた場合は「送信」できる設定を行いたいです。 「name= 」 部分を同じ名前にすると可能ですが、異なる名前にすると動作いたしません。 どうかご教授お願い致します。 ■javascript部分 <script language="JavaScript" type="text/javascript"> function CheckForm(theform) { var FormOK = false; if (!theform.category1[0].checked && !theform.category2[1].checked && !theform.category3[2].checked && !theform.category4[3].checked && !theform.category5[4].checked) { alert("商品を選択してください。"); }else{ FormOK = true; } return FormOK; } function FieldControl(element, message) { alert(message); } </script> ■HTML部分 <form name="theform" onsubmit="return CheckForm(this);" action="" method="post"> <input value="category1" name="category1" type="checkbox">category1<br> <input value="category2" name="category2" type="checkbox">category2<br> <input value="category3" name="category3" type="checkbox">category3<br> <input value="category4" name="category4" type="checkbox">category4<br> <input value="category5" name="category5" type="checkbox">category5<br><br> <br> <br> <input value="送信" name="submit" type="submit"></form> 宜しくお願い致します。