- ベストアンサー
javasctiptでチェックボックスの全選択・全解除を複数かけ合わせたものが実装できません
下記のような、チェックボックスの全選択・全解除を複数かけ合わせたものが実装できません。 □A(親) □A-a(子) □A-a-1(子の子) □A-a-2 □A-a-3 □A-b(子) □A-b-1(子の子) □A-b-2 □A-b-3 □A-c(子) □A-c-1(子の子) □A-b-2 □A-b-3 □B(親) □B-a(子) □B-a-1(子の子) □B-a-2 □B-a-3 □B-b(子) □B-b-1(子の子) □B-b-2 □B-b-3 □B-c(子) □B-c-1(子の子) □B-b-2 □B-b-3 □C(親) □C-a(子) □C-a-1(子の子) □C-a-2 □C-a-3 □C-b(子) □C-b-1(子の子) □C-b-2 □C-b-3 □C-c(子) □C-c-1(子の子) □C-b-2 □C-b-3 というチェックボックスがあり、 1：親を選択→親に属する子、子の子がすべて選択 選択解除 →すべてが解除 ■A(親) ■A-a(子) ■A-a-1(子の子) ■A-a-2 ■A-a-3 ■A-b(子) ■A-b-1(子の子) ■A-b-2 ■A-b-3 ■A-c(子) ■A-c-1(子の子) ■A-b-2 ■A-b-3 2：子をすべて選択 →親、子の子すべて選択 子を選択解除→親、子が選択解除 □A(親) □A-a(子) □A-a-1(子の子) ■A-a-2 ■A-a-3 ■A-b(子) ■A-b-1(子の子) ■A-b-2 ■A-b-3 ■A-c(子) ■A-c-1(子の子) ■A-b-2 ■A-b-3 2：子の子をすべて選択 →子、親すべて選択 子の子を選択解除→子、親が選択解除 □A(親) □A-a(子) □A-a-1(子の子) ■A-a-2 ■A-a-3 ■A-b(子) ■A-b-1(子の子) ■A-b-2 ■A-b-3 ■A-c(子) ■A-c-1(子の子) ■A-b-2 ■A-b-3 下記を参考にしてみて試行錯誤してみたのですが、応用することができませんでした。。。（ほぼ素人です） http://q.hatena.ne.jp/1256449988 http://www.miklabo.com/web/js/js_check.php HTMLは下記のようなものを用意しています。 <form> <label><input type="checkbox" name="section1" />A</label> <label><input type="checkbox" name="section11" />A- a</label> <label><input type="checkbox" name="section111" />A-a-1</label> <label><input type="checkbox" name="section111" />A-a-2</label> . . . </form> 時間がなく、困っております。是非ご教授いただけませんでしょうか？ よろしくお願いいたします。
- oshieteDS
- お礼率20% (1/5)
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
つかれた～。いべんとのはりつけは、てぬきしました。 あとByName()[0]とかもてぬきです。 まちがいがあったら、ごしてきおねがいします。 ぜんかくくうはくは、すべてはんかくになおしてくださいね。ばぶ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test1.html</title> <style type="text/css"> fieldset { padding: 4px; } fieldset.mago { width: 400px; } p { margin: 0; } p.ko { float: left; width: 200px; margin: 4px 0; } </style> </head> <body> <form name="abc" action="#"> <fieldset> <legend>グループＡ<input type="checkbox" value="A" name="Group_A" onClick="GA.setAll(this.checked)">(全てを選択する)</legend> <fieldset class="ko"> <p class="ko"> <input type="checkbox" name="Group_A_A" size="30" onClick="GA_A.setAll(this.checked);GA.checker()">子供用 </p> <fieldset class="mago" onClick="GA_A.checker()"> <p> <input type="checkbox" name="Group_A_A_1" size="30">option1 <input type="checkbox" name="Group_A_A_2" size="30">option2 <input type="checkbox" name="Group_A_A_3" size="30">option3 </p> </fieldset> </fieldset> <fieldset> <p class="ko"> <input type="checkbox" name="Group_A_B" size="30" onClick="GA_B.setAll(this.checked);GA.checker()">大人用 </p> <fieldset class="mago" onClick="GA_B.checker()"> <p> <input type="checkbox" name="Group_A_B_1" size="30">option1 <input type="checkbox" name="Group_A_B_2" size="30">option2 <input type="checkbox" name="Group_A_B_3" size="30">option3 </p> </fieldset> </fieldset> <fieldset> <p class="ko"> <input type="checkbox" name="Group_A_C" size="30" onClick="GA_C.setAll(this.checked);GA.checker()">老人用 </p> <fieldset class="mago" onClick="GA_C.checker()"> <p> <input type="checkbox" name="Group_A_C_1" size="30">option1 <input type="checkbox" name="Group_A_C_2" size="30">option2 <input type="checkbox" name="Group_A_C_3" size="30">option3 </p> </fieldset> </fieldset> </fieldset> </form> <script type="text/javascript"> var Group = function ( parent ) { this.name = 'CheckboxGroup'; this.parent = document.getElementsByName( parent )[0]; this.add = function ( ) { var objs; var cnt1, obj1; var cnt2, obj2; for( cnt1 = 0; obj1 = arguments[ cnt1++ ]; ) { if( 'string' === typeof obj1 ) { objs = document.getElementsByName( obj1 ) || [ document.getElementById( obj1 ) ]; for( cnt2 = 0; obj2 = objs[ cnt2++ ]; ) member.push( obj2 ); } else if( 'INPUT' === obj1.nodeName && 'checkbox' === obj1.type ) { member.push( obj1 ); } else if( obj1.name === 'CheckboxGroup' ) { member.push( obj1 ); } } }; this.setAll = function ( sw ) { var cnt = 0, o; this.parent.checked = sw = sw ? true: false; while( o = member[ cnt++ ] ) 'CheckboxGroup' === o.name ? o.setAll( sw ): o.checked = sw; } this.checker = function ( ) { var cnt = 0, flag, o, p; while( o = member[ cnt++ ] ) { p = 'CheckboxGroup' == o.name ? o.parent.checked: o.checked; if( 'undefined' === typeof flag ) flag = p; else if( flag != p ) return; } this.parent.checked = flag; }; var cnt = 1, member = [ ], args = [ ], o; while(o = arguments[ cnt++ ] ) args.push( o ); this.add.apply( this, args ); }; var GA_A = new Group( 'Group_A_A', 'Group_A_A_1', 'Group_A_A_2', 'Group_A_A_3'); var GA_B = new Group( 'Group_A_B', 'Group_A_B_1', 'Group_A_B_2', 'Group_A_B_3'); var GA_C = new Group( 'Group_A_C', 'Group_A_C_1', 'Group_A_C_2', 'Group_A_C_3'); var GA = new Group( 'Group_A', GA_A, GA_B, GA_C ); //うえの４ぎょうを、わんせっとで、がんがんおぶじぇくとをつくる！ </script> </body> </html>
その他の回答 (4)
- babu_baboo
- ベストアンサー率51% (268/525)
いつものごとく、ちょっとていせい this.checker = function ( ) { var cnt = 0, flag, o, p; while( o = member[ cnt++ ] ) { p = 'CheckboxGroup' == o.name ? o.parent.checked: o.checked; if( 'undefined' === typeof flag ) flag = p; else if( flag != p ) { flag = false; break; } } this.parent.checked = flag; }; ぜんぶえらぶためだけの、ちぇっくぼっくするなら これじゃないほうが。。。
- fujillin
- ベストアンサー率61% (1594/2576)
だいぶ要領が悪い気がするけど、一応動作するみたい。 ・HTMLをどの程度変えていいのか不明だけれど、一団全体のブロックと サブのブロックを囲むDIVだけ追加。（checkgroupとsubgroup） （#1様ご提案のように親子関係と構造を一致させた方が明快で単純化できる） ・checkgroupごとに動作（複数可） ・DIV内にあるINPUTはcheckboxのみと仮定。（タイプのチェックは省略） <html> <head> <style type="text/css"> div.checkgroup .subgroup label { margin-right:1em; } </style> </head> <body> <form> <div class="checkgroup"> <label><input type="checkbox" name="section1">A</label> <div class="subgroup"> <label><input type="checkbox" name="section11">A-a</label> <label><input type="checkbox" name="section111">A-a-1</label> <label><input type="checkbox" name="section111">A-a-2</label> </div> <div class="subgroup"> <label><input type="checkbox" name="section12">A-b</label> <label><input type="checkbox" name="section121">A-b-1</label> <label><input type="checkbox" name="section122">A-b-2</label> </div> </div> </form> <script type="text/javascript"> (function(){ var k, elm = document.getElementsByTagName('DIV'); for (k=0; k<elm.length; k++) { if (elm[k].className == 'checkgroup') { elm[k]./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (evt) { var t = evt.target || evt.srcElement; if ( t.nodeName == 'INPUT' && t.type == 'checkbox') check(t); function check(t, dir){ var i, flg = true, rel = setRelation(t); if (rel.s) { for (i=0; i<rel.s.length; i++) if (!rel.s[i].checked) flg = false; if (dir != 'c' && rel.p && rel.p.checked != flg) { rel.p.checked = flg; check(rel.p, 'p'); } } if (dir != 'p' && rel.c) { for (i=0; i<rel.c.length; i++) { if (rel.c[i].checked != t.checked) { rel.c[i].checked = t.checked; check(rel.c[i], 'c'); }} } } function setRelation(e) { var p, sib=[], cld=[], i, tmp, t; tmp = e.parentNode; while (tmp.nodeName != 'DIV') tmp = tmp.parentNode; if (tmp.className == 'checkgroup') { sib[0] = tmp.getElementsByTagName('INPUT')[0]; tmp = tmp.getElementsByTagName('DIV'); for (i=0; i<tmp.length; i++) cld[i] = tmp[i].getElementsByTagName('INPUT')[0]; } else if (tmp.className == 'subgroup') { t = tmp.getElementsByTagName('INPUT'); if (e == t[0]) { for (i=1; i<t.length; i++) cld[i-1] = t[i]; tmp = setRelation(tmp); p = tmp.s[0]; sib = tmp.c; } else { p = t[0]; for (i=1; i<t.length; i++) sib[i-1] = t[i]; } } return {'p':p,'s':sib,'c':cld }; } }, false); } } })(); </script> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
ぶろっくようそでかこまなくてもいいの？
- yyr446
- ベストアンサー率65% (870/1330)
HTML部分変更してよいのですか、下記のように親子関係を構造で持たせば、 スクリプトの処理が楽になり、一つ一つにonclick属性を持たせないでも 出来ますが... <form> <span> <label><input type="checkbox" name="section1" />A</label> <span> <label><input type="checkbox" name="section11" />A- a</label> <span> <label><input type="checkbox" name="section111" />A-a-1</label> <label><input type="checkbox" name="section112" />A-a-2</label> </span> </span> <span> <label><input type="checkbox" name="section12" />A- b</label> <span> <label><input type="checkbox" name="section121" />A-b-1</label> <label><input type="checkbox" name="section122" />A-b-2</label> </span> </span> </span> <span> <label><input type="checkbox" name="section2" />B</label> <span> <label><input type="checkbox" name="section21" />B- a</label> <span> <label><input type="checkbox" name="section211" />B-a-1</label> <label><input type="checkbox" name="section212" />B-a-2</label> </span> </span> <span> <label><input type="checkbox" name="section22" />B- b</label> <span> <label><input type="checkbox" name="section221" />B-b-1</label> <label><input type="checkbox" name="section222" />B-b-2</label> </span> </span> </span> </form>
お礼
追加でいただいた部分とあわせて、早速実際のソースに当て込んでやってみたところ、意図通りに動かせるようになりました！！ 本当にありがとうございました。