- 締切済み
AJAXで生成したHTMLでのチェックボックス一括チェックの方法を教えてください
現在jqueryを使って、ajaxでチェックボックスを生成して、それに対して一括チェックボタンを付けたいと考えております。 <input name="allcheck" type="checkbox" id="checkall" checked="checked" />全て<br /> <input type="checkbox" name="carrier" value="docomo" checked="checked" />docomo<br /> <input type="checkbox" name="carrier" value="au" checked="checked" />au<br /> <input type="checkbox" name="carrier" value="softbank" checked="checked" />softbank<br /> というチェックボックスがajaxで生成されて function carrier_check() { $('#checkall').click(function(e){ $(':checkbox[type=checkbox][name=carrier]').attr('checked', $('#checkall').attr('checked')); }); } のjavascriptで上記のチェックボックスを一括チェックできるようにしようとしているのですが ajaxを使わずに上記のチェックボックスをHTMLに書いているときは一括チェックできるのですが、ajaxを使用して生成した場合にはチェックボックスの一括チェックができません。 どのようにすれば、ajaxで生成されたチェックボックスを一括チェックできるようになるのでしょうか？ ご存知の方がいらっしゃいましたらご教授お願いいたします。
- silverfall
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
<ajaxを使わずに上記のチェックボックスをHTMLに書いているときは一括チェックできるのですが、 ajaxを使用して生成した場合にはチェックボックスの一括チェックができません。> と言う事は、きっとcheckboxを生成する前にcarrier_check()を実行している からですよ。carrier_check()の内容はまちがってないみたいだから、 ajax実行後にcarrier_check()を実行すればよい。 前後がわからないので、document readyで"id="hoge"のDIVにチェックボッ クスを生成した時のサンプルですけど、 <body> <div id="hoge"> <div> <script type="text/javascript"> <!-- $(function(){ var val='<input name="allcheck" type="checkbox" id="checkall" checked="checked" />全て<br />'; val +='<input type="checkbox" name="carrier" value="docomo" checked="checked" />docomo<br />'; val +='<input type="checkbox" name="carrier" value="au" checked="checked" />au<br />'; val +='<input type="checkbox" name="carrier" value="softbank" checked="checked" />softbank<br />'; $("#hoge").html(val); carrier_check(); }); function carrier_check() { $('#checkall').click(function(e){ $(':checkbox[type=checkbox][name=carrier]').attr('checked', $('#checkall').attr('checked')); }); } // --> </script> </body>
- babu_baboo
- ベストアンサー率51% (268/525)
//@cc_on document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; if( 'checkall' === e.id ) { var o, c = 0, chbxs = document.getElementsByName( 'carrier' ); while( o = chbxs[ c++ ] ) o.checked = e.checked; } }, false );
お礼
動きましたーーーー。ありがとうございます。
関連するQ&A
- ＣＧＩでチェックボックスを使う方法
チェックボックスをＣＧＩ（Ｃ言語）で使用する方法を教えて下さい。 例えば、ＨＴＭＬで <input type="checkbox" name="Check1" value="Sel11" /> チェック１ 選択１<br /> <input type="checkbox" name="Check1" value="Sel12" /> チェック１ 選択２<br /> <input type="checkbox" name="Check1" value="Sel13" /> チェック１ 選択３ <hr /> <input type="checkbox" name="Check2" value="Sel21" checked /> チェック２ 選択１<br /> <input type="checkbox" name="Check2" value="Sel22" /> チェック２ 選択２<br /> <input type="checkbox" name="Check2" value="Sel23" checked /> チェック２ 選択３ というプログラムはＣＧＩ（Ｃ言語）ではどの様に記述すれば良いでしょうか？
- ベストアンサー
- CGI
- 複数のチェックボックスをチェックしたい
質問させてください。 複数のチェックボックスを項目別に全てチェックするような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
- チェックボックスの戻り
チェックボックスの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
- ラジオボタンとチェックボックスの計算について
ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">～</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年～10年<br> <input name="ch6" value="3" type="radio">9年～5年<br> <input name="ch6" value="1" type="radio">4年～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>
- ベストアンサー
- JavaScript
- チェックボックスの値を（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
- チェックボックスにチェックしたファイルだけをダウンロードできるようにしたい
サーバーにpdfファイルを１０個保存しています。 ＨＴＭＬページでチェックボックスにチェックを入れたpdfだけを ダウンロードできるようにURL入りの返信メールを自動的に送りたい のですが、やり方がわかりません。 どなたか詳しい人がおられましたら、教えていただけますでしょうか。 一応チェックボックスの過去の回答を見たのですが見当たりません。 （全て見れたわけではないですが） チェックボックス表示までは以下のところまでできたのですが。 よろしくお願いします。 <form> <input type="checkbox" name="グループ1" value="項目1">Apdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目2">Bpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目3">Cpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目4">Dpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目5">Epdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目6">Fpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目7">Gpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目8">Hpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目9">Ipdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目10">Jpdf<br><br><br><br> </form>
- 締切済み
- HTML
- 特定のチェックボックスをチェックするには
特定のチェックボックス「白」を CHECKEDにする方法を教えて下さい。 ＃数と位置が変動するので配列は取得できません。 ＃「もしもcolorの値が白なら CHECKED」のような関数にしたい。 <INPUT TYPE="CHECKBOX" NAME="color" VALUE="おまかせ"> <INPUT TYPE="CHECKBOX" NAME="color" VALUE="白"> <INPUT TYPE="CHECKBOX" NAME="color" VALUE="ピンク"> <INPUT TYPE="CHECKBOX" NAME="color" VALUE="緑">
- ベストアンサー
- JavaScript
- 複数のチェックボックスの一括チェック/解除などのコントロール
チェックボックスである、1月～12月の値を検索条件としてPHPに渡します。 その際、次のように動作するjavascriptをご教示下さい。よろしくお願い致します。 (1) 通年をチェックしたら、1月～12月もチェック（解除されたら全て解除） (2) 上半期をチェックしたら、1月～6月もチェック（〃） (3) 下半期をチェックしたら、6月～12月もチェック（〃） (4) 通年、上半、下半は、いずれかがチェックされている間、他はdisabledに。 チェックが外れたら、全てアクティブかつ全チェックが解除される状態に。 以上が妥当と思いますが、(4)にの仕様についてはより洗練いただければ誠に幸いです。 <html> <head> <script language="javascript"> </script> </head> <body> <form method="post" action="search.php" id="form1" name="form1"> <input type="checkbox" name="month[]" value="200501">2005年1月<br> <input type="checkbox" name="month[]" value="200502">2005年2月<br> <input type="checkbox" name="month[]" value="200503">2005年3月<br> ：（gooの文字数制限により略） <input type="checkbox" name="month[]" value="200510">2005年10月<br> <input type="checkbox" name="month[]" value="200511">2005年11月<br> <input type="checkbox" name="month[]" value="200512">2005年12月<br> <input type="checkbox" name="all" value="">通年<br> <input type="checkbox" name="1sthalf" value="">上半期のみ<br> <input type="checkbox" name="2ndhalf" value="">下半期のみ<br> <input type="submit" name="exec" value="検索"> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスの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> 宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- チェックボックスの表示・非表示 動作
はじめまして。 初めて掲示板を利用させていただきます。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> よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
うぉぉぉ、動きました。 ありがとうございます。助かりました！！