下記のような、チェックボックスの全選択・全解除を複数かけ合わせたものが実装できません。
□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>
時間がなく、困っております。是非ご教授いただけませんでしょうか?
よろしくお願いいたします。
No.1
- 回答日時:
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>
No.3
- 回答日時:
だいぶ要領が悪い気がするけど、一応動作するみたい。
・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>
No.4ベストアンサー
- 回答日時:
つかれた~。
いべんとのはりつけは、てぬきしました。あと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>グループA<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 );
//うえの4ぎょうを、わんせっとで、がんがんおぶじぇくとをつくる!
</script>
</body>
</html>
追加でいただいた部分とあわせて、早速実際のソースに当て込んでやってみたところ、意図通りに動かせるようになりました!!
本当にありがとうございました。
No.5
- 回答日時:
いつものごとく、ちょっとていせい
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;
};
ぜんぶえらぶためだけの、ちぇっくぼっくするなら
これじゃないほうが。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
checkboxをクリックしてリロー...
-
チェックボックスのON/OFFでVal...
-
【jsp/Java】チェックボックス...
-
アンケートページでチェックボ...
-
ラジオボタンとチェックボック...
-
選択したラジオボタンが画面の...
-
フォームのチェックボックスの...
-
Objective-Cでチェックボックス...
-
チェックボックスの使い方
-
チェックボックスを使って条件検索
-
特定<table>内の<td>の色を変える
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
value内に変数を入れたい
-
ラジオボタンのチェックが外れ...
-
ラジオボタンにタブインデック...
-
チェックボックス付きのテーブ...
-
確認ダイアログの出し方(JavaS...
-
プルダウンで選択すると、DBの...
-
<input>の選択肢をプルダウンメ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFに応...
-
checkboxをクリックしてリロー...
-
チェックボックスの設定
-
チェックボックスで指定したも...
-
スクリプト内でチェックボック...
-
確認ページからフォームページ...
-
複数のチェックボックス項目が...
-
クリアボタンの動作について
-
フォームのチェックボックスの...
-
チェックボックスとラジオボタ...
-
javascriptでチェックボックス...
-
チェックボックスで合計値を計...
-
チェックボックスを利用した表...
-
checkboxの文字連結の方法を教...
-
JSP内で可変するチェックボック...
-
JavaScriptからの戻り値
-
一つのチェックボックスのON/OF...
-
背景色を変えて未入力チェック...
おすすめ情報