javasctiptでチェックボックスの全選択・全解除を複数かけ合わせたものが実装できません

解決済

質問者：oshieteDS
質問日時：2009/11/17 23:41
回答数：5件

下記のような、チェックボックスの全選択・全解除を複数かけ合わせたものが実装できません。

□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>

時間がなく、困っております。是非ご教授いただけませんでしょうか？

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

No.5

回答者： babu_baboo
回答日時：2009/11/18 19:36

いつものごとく、ちょっとていせい

　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;
　};

ぜんぶえらぶためだけの、ちぇっくぼっくするなら
これじゃないほうが。。。

- 0
- 件

通報する

No.4ベストアンサー

回答者： babu_baboo
回答日時：2009/11/18 18:42

つかれた～。

いべんとのはりつけは、てぬきしました。
あと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>

- 0
- 件

通報する

この回答へのお礼

追加でいただいた部分とあわせて、早速実際のソースに当て込んでやってみたところ、意図通りに動かせるようになりました！！
本当にありがとうございました。

通報する

お礼日時：2009/11/18 23:42

No.3

回答者： fujillin
回答日時：2009/11/18 16:28

だいぶ要領が悪い気がするけど、一応動作するみたい。

・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>

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2009/11/18 13:06

ぶろっくようそでかこまなくてもいいの？

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2009/11/18 11:38

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>