jQueryによるチェックボックスの制御
- jQueryを使用して、チェックボックスの制御を行いたい場合、どのような処理が必要なのでしょうか？
- リストをクリックした際に、対応するチェックボックスにチェックを入れるようにしたい場合、jQueryを使用することができます。
- リストをクリックした時に、他のチェックボックスのチェックが外れるようにするには、jQueryを使ってイベントを制御する必要があります。
- ベストアンサー
jQueryによるチェックボックスの制御
いつもお世話になっています。 只今jQueryを勉強中なのですがチェックボックスの制御が上手くできずに困っています。 <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <input type="checkbox" id="list1" name="example" value="">リスト1 <input type="checkbox" id="list2" name="example" value="">リスト2 <input type="checkbox" id="list3" name="example" value="">リスト3 リスト１をクリックした時はチェックボックス１にチェックが入り他のチェックが外れる リスト2をクリックした時はチェックボックス2にチェックが入り他のチェックが外れる この様な処理ができるようにしたいのですが jqueryでこちらを再現することができるのでしょうか？ もしよろしければどなたかご教示ください。
- igaiga2012
- お礼率50% (1/2)
- AJAX
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 HTMLの構成によってセレクタの内容が変わってしまいますが、以下のようなイメージです。 $().ready ( function() { // liのクリックイベントを設定 $('li').click ( function() { // まずは全てのチェックを外す $('input:checkbox').removeAttr ( 'checked' ); // クリックされたリストのindexを取得して同じindexのチェックボックスにチェックを入れる // よって、リスト2の場合はリスト2にチェックが入る $('input:checkbox:eq('+$(this).index()+')').attr ( 'checked', 'checked' ); }); }); 全てのチェックを消して、特定のチェックを入れるという処理は基本的に変わらないと思います。
関連するQ&A
- 複数のチェックボックスをチェックしたい
質問させてください。 複数のチェックボックスを項目別に全てチェックするような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
- チェックボックスを選択するとテキストボックスが表示
質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか？ <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をご教示願いますでしょうか？ 宜しくお願い致します。
- ベストアンサー
- JavaScript
- チェックボックスの全選択
<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
- チェックボックスの戻り
チェックボックスのvalue値に数字を入れてPOSTしています。 DB登録の前にその値を足し算してDBに登録しています。 <input type="checkbox" name="cb[0]" value="1"> <input type="checkbox" name="cb[1]" value="2"> <input type="checkbox" name="cb[2]" value="4"> <input type="checkbox" name="cb[3]" value="8"> <input type="checkbox" name="cb[4]" value="16"> ・・・のようにしています。DBの値を読み取ってcheckedを付ける際はどのようにしたら効率よく処理できるでしょうか？switchを使うとすごくチェックボックスの数が増えると厄介です。困っています。教えてください。
- ベストアンサー
- PHP
- チェックボックスをクリックした際、自動的に他の値も
■チェックボックスをクリックした際、自動的に他の値も追加したい 下記のようなチェックボックスがあった際に、 <input type="checkbox" name="hoge[]" value="1" />ホゲ <input type="checkbox" name="piyo[]" value="1" />ピヨ <input type="checkbox" name="puyo[]" value="1" />プヨ ホゲをクリックしたら、value="1"になるかと思うのですが、 このvalue部分を動的に生成することはできるでしょうか？ 例えば、ホゲをクリックしたら(ホゲをクリックした時だけ)、 自動的に、 <input type="checkbox" name="hoge[]" value="1" /> <input type="checkbox" name="hoge[]" value="2" /> <input type="checkbox" name="hoge[]" value="3" /> <input type="checkbox" name="hoge[]" value="4" /> <input type="checkbox" name="hoge[]" value="5" /> <input type="checkbox" name="hoge[]" value="6" /> <input type="checkbox" name="hoge[]" value="7" /> <input type="checkbox" name="hoge[]" value="8" /> <input type="checkbox" name="hoge[]" value="9" /> をクリックしたのと同じ処理が走るよう、スクリプトで書くには、 どうすればよいでしょうか？
- ベストアンサー
- JavaScript
- 大量のチェックボックス状態取得について
質問させてください。 以下のようなHTML構造で連続している場合、 ID内全体のチェックボックスの状態を取得し、未チェックの物を非表示するにはどのようにすれば一番処理速度が速いのでしょうか？ <div id="hoge1"> <ul> <li> <ul class="Parents"> <li class="child"><input type="checkbox" name="AAA"></li> <li class="child"><input type="checkbox" name="BBB"></li> <li class="child"><input type="checkbox" name="CCC"></li> <li class="child"><input type="checkbox" name="DDD"></li> </ul> </li> <li> <ul class="Parents"> <li class="child"><input type="checkbox" name="AAA"></li> <li class="child"><input type="checkbox" name="BBB"></li> <li class="child"><input type="checkbox" name="CCC"></li> <li class="child"><input type="checkbox" name="DDD"></li> </ul> </li> ～～～～～～～～～～～～ ※繰り返し ～～～～～～～～～～～～ </ul> </div> 現在はjQueryで$ (ul.Parents li.child)で全体をラップし、for文のループ内で$eq()で１件毎chekedを参照し、.hide()を行っています。 動作自体は問題ないのですが、処理速度の遅さが気になっています。 速い方法でればjQueryを使用しない方法でもかまいません。 どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- チェックに応じて違うチェックボックスをアクティブにしたい
次の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>
- ベストアンサー
- JavaScript
- チェックボックスの未入力チェック
ざっとですけれども <form action="**" name="myform" onsubmit="return Check()" method=post> <input type="checkbox" name="Erasedata" id="Erasedata" value="1" > <input type="checkbox" name="Erasedata" id="Erasedata" value="2" > ・・・ <input type="checkbox" name="Erasedata" id="Erasedata" value="5" > <input type="submit" value="選択されたものを削除する"> このようなチェックボックスがあったとして function Check() { for (i=0;i<document.myform.length;i++) { if(document.myform.Erasedata[i].checked==true) {return true;} } alert("どこかにチェックを入れて下さい "); return false; } といった感じで未入力チェックをしています。 チェックボックスが複数の場合はうまく動くのですが、チェックボックスがひとつだとうまくいきません。スクリプトで何か問題があるようでしたらご指摘お願いできませんでしょうか。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- チェックボックス連結
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
- チェックボックス選択で（3つ）まで
チェックボックス選択で（3つ）まで <input type="checkbox" name="fhobby" value="animation">アニメ <input type="checkbox" name="fhobby" value="game">ゲーム <input type="checkbox" name="fhobby" value="reading">読書 <input type="checkbox" name="fhobby" value="amusement">娯楽 <input type="checkbox" name="fhobby" value="comics">漫画 <input type="checkbox" name="fhobby" value="jogging">ジョギング<br> <input type="checkbox" name="fhobby" value="cycling">サイクリング <input type="checkbox" name="fhobby" value="shopping">ショッピング <input type="checkbox" name="fhobby" value="picture">絵画 <input type="checkbox" name="fhobby" value="travel">旅行 <input type="checkbox" name="fhobby" value="others">その他
- ベストアンサー
- HTML
お礼
確かに一度クリアしてから選べば解決ですね！ 難しく考えすぎてその方法が浮かびませんでした 非常に参考になりました。 ありがとうございますm(_ _)m