データによってチェックボックスを操作する方法とは?

このQ&Aのポイント
  • csvファイルをデータバインドを使ってHTMLに表示する際、データに応じてチェックボックスを操作できる方法を教えてください。
  • 入力データが1の場合は「有」にチェックを、0の場合は「無」にチェックを、-1の場合は「撤去」にチェックを入れた状態で表示し、値もセットしたいです。
  • javascriptでこの要件を実現する方法を教えてください。
回答を見る
  • ベストアンサー

データによってチェックボックスを操作

csvファイルをデータバインドを使ってHTMLに表示するとき、読み出したデータをそのまま表示するのではなく、データによってチェックボックスを操作できるようにしたいのですが、どうやったら出来るのかさっぱり分かりません。 <input name="c1" type="checkbox" value="">有 <input name="c2" type="checkbox" value="">無 <input name="c3" type="checkbox" value="">撤去 となっている時、データが1なら「有」にチェックを、0なら「無」にチェック、-1なら「撤去」にチェックを入れた状態で表示し、且つ値もセットしたいのですが、javascriptだけで可能でしょうか? 可能ならば、どういったスクリプトを書けばいいのでしょうか? ご教授お願い致します。

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

test.csv ------------- no,name,kind 1,DATA1,-1 2,DATA2,0 3,DATA3,1 4,DATA4,0 の時 こんな感じ ------------------------------------------------------------------- <html> <head> <title>サンプル</title> <script language="JScript"> window.onload=init; function init(){ var recordSize=csvDB.recordset.recordCount; for(var i=1;i<=recordSize;i++){ var value = parseInt(csvTable.rows(i).cells(2).innerText); var c1="'"; var c2="'"; var c3="'"; switch(value){ case 1: c1="1' checked" ;break;//有 case 0: c2="0' checked" ;break;//無 case -1:c3="-1' checked";break;//撤去 } csvTable.rows(i).cells(2).innerHTML= "<input name='c1' type='checkbox' value='" + c1 + ">有" + "<input name='c2' type='checkbox' value='" + c2 + ">無" + "<input name='c3' type='checkbox' value='" + c3 + ">撤去"; } csvTable.rows(0).style.backgroundColor="pink"; } </script> </head> <body> <table id="csvTable" width="700" border=1 datasrc="#csvDB"> <thead> <tr> <td>番号</td><td>項目</td><td>種類</td> </tr> </thead> <tbody> <tr> <td><span datafld = "no"></span></td> <td><span datafld = "name"></span></td> <td><span datafld = "kind"></span></td> </tr> </tbody> </table> <object id="csvDB" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <PARAM NAME="CharSet" VALUE="shift-jis"> <param name="DataURL" value="test.csv"> <param name="UseHeader" value="true"> </object> </body> </html>

shochan49
質問者

お礼

おおw素晴らしい。 約1週間悩み続けて出来なかったものが・・・w 聞いて良かったです。有難うございます。 これを応用させていただきます。 自分ももっと勉強しなくては。

関連するQ&A

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

    <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の 書き方を教えて貰えないでしょうか

  • 複数のチェックボックス項目があり、そのチェック状態によって

    複数のチェックボックス項目があり、そのチェック状態によって 処理を分岐したいのですが、スマートなjavascriptの書き方が あれば教えてください! 【例】 <input type="checkbox" name="koumokuA" value="A1" /> <input type="checkbox" name="koumokuA" value="A2" /> <input type="checkbox" name="koumokuA" value="A3" /> <input type="checkbox" name="koumokuA" value="A4" /> <input type="checkbox" name="koumokuA" value="A5" /> <input type="checkbox" name="koumokuB" value="B1" /> <input type="checkbox" name="koumokuB" value="B2" /> <input type="checkbox" name="koumokuB" value="B3" /> <input type="checkbox" name="koumokuB" value="B4" /> <input type="checkbox" name="koumokuC" value="C1" /> <input type="checkbox" name="koumokuC" value="C2" /> <input type="checkbox" name="koumokuC" value="C3" /> <input type="checkbox" name="koumokuC" value="C4" /> もし【koumokuA】のA2とA3、【koumokuB】のB1とB4が選択された場合 同項目ではor条件、他項目ではand条件で処理したいので 考え方としては、 if(koumokuA=="A2" || koumokuA=="A3"){ if(koumokuB=="B1" || koumokuB=="B4"){ 実行内容 } } こんな感じなのですが、 実際にはチェックボックスの値は配列になるのでこのスクリプトでは動かない点と 効率よく複数のチェックボックスの選択結果を判定して、スクリプトを実行する 組み方があればご教授ください。 実行結果は、データが格納された配列の中から、選択項目に対応したデータを 表示するようにしたいのです。 よろしくお願いします。

  • チェックに応じて違うチェックボックスをアクティブにしたい

    次のHTMLのように、大分類、小分類のような構成のチェックボックス グループがあります(初期設定は全部チェック無しです) 普段は[a][b][c][d]をdisableとしておき、(1) にチェックが入った 場合に[d]以外([a][b][c])アクティブ(?とにかくチェックを入れる ことができる)ようにするにはどうしたらいいでしょうか。 よろしくお願い致します。 <form id="Form1"> : <INPUT TYPE="CHECKBOX" NAME="food" value="果物">(1) 果物 <INPUT TYPE="CHECKBOX" NAME="food" value="野菜">(2) 野菜 <INPUT TYPE="CHECKBOX" NAME="food" value="肉魚">(3) 肉魚 <br> <INPUT TYPE="CHECKBOX" NAME="fruit" value="りんご">[a] りんご <INPUT TYPE="CHECKBOX" NAME="fruit" value="みかん">[b] みかん <INPUT TYPE="CHECKBOX" NAME="fruit" value="ぶどう">[c] ぶどう <INPUT TYPE="CHECKBOX" NAME="fruit" value="バナナ">[d] バナナ : </form>

  • 複数のチェックボックスをチェックしたい

    質問させてください。 複数のチェックボックスを項目別に全てチェックするような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を書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。

  • チェックボックスを選択するとテキストボックスが表示

    質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか? <input type="checkbox" name="example" value="" />テレビ ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />新聞 ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />CM ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />その他 ←チェックしたらテキストボックス表示 色々なJavaScriptを試したのですが、 どうも挙動がおかしく、クリックを続けると表示がされたりできなかったり、 という具合になります。 それぞれテキストボックスを表示させたいチェックボックスに 反映できるJavaScriptをご教示願いますでしょうか? 宜しくお願い致します。

  • 送信後のチェックボックスの表示

    最初の画面で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"をつけて表示させています。 もっと、効率のよい書き方はないものでしょうか?

  • チェックボックスのデータの受け取り方について

    以下のようなチェックボックスを作ったとき、 test.phpではどうやって受け取ればよいのでしょうか? nameがそれぞれ違う場合は分かるのですが... 教えてください。 <form method="POST" action="test.php"> <input type="checkbox" name="color" value="red">赤</input> <input type="checkbox" name="color" value="blue">青</input> <input type="checkbox" name="color" value="white">白</input> <input type="checkbox" name="color" value="black">黒</input> <input type="submit" value="送信" > </form>

    • ベストアンサー
    • PHP
  • チェックボックスの値を(1,0)のようにすべて送信する方法

    formをsubmitすると、チェックボックスの値は、 チェックされた項目のvalue値が配列の形で送信されますよね。 たとえば、 <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="111" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="222" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="333" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="444"> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="555" CHECKED> だと、 [111,222,333,555] のように。 今回は、表形式でデータを表示し、 チェックされた行の、他の列の値(フィールド)も取得したいのです。 他の列のフィールドは、チェックされていない行でも入力されている可能性があります。 そうすると、そのフィールドの値も配列にして送ってしまうと、 チェックボックスの値と数が合わなくなり、横方向での関連付けが出来なくなってしまいます。 なので、チェックボックスの送信値を、配列の要素数は全件で、 チェックされたかされていないかということが分かるように することは不可能でしょうか? JavaScriptは規約により、使うことが出来ない状況で困っています(><) 何か案があれば教えてください。

    • ベストアンサー
    • HTML
  • チェックボックス連結

    MySQLで、perlを使ってチェックボックスでデータを送信するのですが、 カラムを分けずに、チェックボックスで複数選択されたデータを、;などの仕切りで同一フィールドへ記録したいのですが、やり方がわかりません。 <input type = checkbox name = col1 value="1"> <input type = checkbox name = col1 value="2"> <input type = checkbox name = col1 value="3"> <input type = checkbox name = col1 value="4"> 結果 col1 |col2 | +-------------- 1;2;3;4| | のような感じです。よろしくお願いします。

    • ベストアンサー
    • MySQL
  • チェックボックスの値を取り出したい

    こんにちは JavaScript初心者です。 過去ログを見ながらここまでやったのですが、何も表示されません。 ?マークの所で引っかかっていると思うのですがどなたかご教授願います。 やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが... 3つチェックされていてOKをクリックした時に、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="OK" > </form> </html>

専門家に質問してみよう