Q&A
②の仕様が良くわかりません。親がチェックされた時に子は全て非チェック状態にするということですか？
親子関係にあるチェックボックスで親のチェックボックスを選択した際に以下の動作を行うプログラムを作成したいと考えています。
①親のチェックボックスを選択した際に、子のチェックボックスが単数の場合は子のチェックボックスが自動的に選択される。（親と子の選択が連動される。）
②親のチェックボックスを選択した際に、子のチェックボックスが複数の場合は子のチェックボックスが非選択になる。（親と子の選択が連動されない。）
<具体例>------------------------------------------------------------------
■単数の場合 ■複数の場合
☑親チェック ☑親チェック
☑子チェック □子チェック □子チェック
<説明>
■単数の場合
①親にチェックを入れる。
②子が単数なので自動的にチェックする。
■複数の場合
①親にチェックを入れる。
②子が複数なので自動的にチェックしない。
（子にチェックを入れたい場合は、ユーザがブラウザ上からクリックしてチェックを入れる必要がある。）
現時点での自身のプログラム内容は下記のようになっています。
checkbox.html
1<!DOCTYPE HTML> 2 3<html lang="ja"> 4 5<head> 6 7<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 8 9<META http-equiv="Content-Script-Type" content="text/javascript"> 10 11<title>ﾀｲﾄﾙ</title> 12 13<script type="text/javascript"> 14 15<!-- 16 17function checkParent(obj) { 18 19var parentCheck = obj.checked; 20 21var group = "group_" + obj.id; 22 23var oInputs = document.getElementById(group).getElementsByTagName("input"); 24 25for (var i = 0; i < oInputs.length; i++) { 26 27if (oInputs[i].getAttribute("type") == "checkbox") { 28 29if(i==oInputs.length[0]){ 30 31oInputs[i].checked = parentCheck; 32 33} else { 34 35document.Form.elements["obj"].checked = false ; 36 37} 38 39} 40 41} 42 43function checkChild(obj) { 44 45var childId = obj.id; 46 47var parentId = childId.slice(0,8); 48 49var parentId = document.getElementById(parentId); 50 51var childCheck = childId.checked; 52 53if(!childCheck) { 54 55parentId.checked = false; 56 57} 58 59} 60 61//> 62 63</script> 64 65</head> 66 67<body> 68 69<form> 70 71<div id = "check_group"> 72<div id="group_check_01"> 73 74<label for="check_01">親ﾁｪｯｸ<input type="checkbox" value="checkbox" id="check_01" onClick="checkParent(this);"></label><br> 75 76<label for="check_0101">子ﾁｪｯｸ1<input type="checkbox" value="checkbox" id="check_0101" onClick="checkChild(this)"></label><br> 77 78<label for="check_0102">子ﾁｪｯｸ2<input type="checkbox" value="checkbox" id="check_0102" onClick="checkChild(this)"></label><br> 79 80</div> 81 82 83<div id="group_check_02"> 84 85<label for="check_02">親ﾁｪｯｸ<input type="checkbox" value="checkbox" id="check_02" onClick="checkParent(this);"></label><br> 86 87<label for="check_0201">子ﾁｪｯｸ1<input type="checkbox" value="checkbox" id="check_0201" onClick="checkChild(this)"></label><br> 88 89</div> 90</div> 91 92</form> 93 94</body> 95 96</html> 97
htmlに記載されている子のチェックボックスのinputタグ内の末尾に"checked"と記述することで解消される問題でもあります。
しかし、親チェックボックスの数が増えてくると逐一、子のチェックボックスが単数のものに対して"checked"と記述していくのはミスの発生や効率面でも良くないと考えました。（保守性の問題）
そのため今回のようなJavascriptを用いて自動的に単数か複数かを判断して選択するプログラムを作成したいと考えました。
下記のサイトを参考にしてプログラムを作成しているのですが
自身の思うようなプログラムが作れません。
少しでもわかる方はヒントや参考サイトでも構いませんので
教えていただけると助かります。
よろしくお願い致します。
■参考サイト：
http://d.hatena.ne.jp/osakana_21/20080416/1208330846
https://oshiete.goo.ne.jp/qa/1392550.html
ご質問ありがとうございます。はい。その通りです。例えば上記のプログラムの<div id="group_check_01">内にある親がチェックされてもそのdivタグ内の子は非チェック状態にするイメージです。説明不十分で申し訳ありません。よろしくお願い致します。
結局のところ、子が複数ある場合の親には意味がないと思っていいのでしょうか？
申し訳ありません。言われるまで気づけませんでした。自身の言い方が不適切でした。その通りだと思います。子が複数ある場合は親との関係性はありません。子が単数の場合と比較すると単数と複数との違いが分かりやすくなるかなと考えて記載していました。
回答3件
0
仕様に疑問がありますが、言葉通りならこう。
JavaScript
1 document.addEventListener('change', function(event) { 2 var target = event.target; 3 if (!target.checked) { 4 return true; 5 } 6 7 var id = target.id; 8 if (!id) { 9 return true; 10 } 11 12 var child = document.querySelectorAll('[id^="' + id + '"]'); 13 for (var i = 0, len = child.length; i < len; i++) { 14 if (child[i] === target) { 15 continue; 16 } 17 18 child[i].checked = len === 2; 19 } 20 21 return true; 22 }, false);
投稿2018/02/19 06:29
総合スコア13749
0
ベストアンサー
よっ!
問題点だけを試してみました。
①親のチェックボックスを選択した際に、子のチェックボックスが単数の場合は子のチェックボックスが自動的に選択される。
②親のチェックボックスを選択した際に、子のチェックボックスが複数の場合は子のチェックボックスが非選択になる。（非チェックになる。）
ただcheckParentのFuncを直しましたが、正直に、Culuculuさんのコーディングはもうちょっと綺麗に変更することが出来ます。
function checkParent(obj) { var parentCheck = obj.checked; var parentId = obj.id; var oInputs = [] var getInput = true var i = 1; while(getInput == true) { var childId = i if(i < 10) { childId = '0'+childId } var id = parentId+childId var input = document.getElementById(id) if(input) { oInputs.push(input) i++ } else { getInput = false } } if(!oInputs.length) return false oInputs.map(function(input) { input.checked = parentCheck }) return false }
提案です
同じculuculuさんのコードの構造で作り直してみて、こうなります。
<!DOCTYPE HTML> <html lang="ja"> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title>ﾀｲﾄﾙ</title> <script type="text/javascript"> function checkParent(obj) { var parentCheck = obj.checked; var parentId = obj.id; var oInputs = document.querySelectorAll('[check-parent="'+parentId+'"]') if(!oInputs.length) return false for(var i in oInputs) { var input = oInputs[i] input.checked = parentCheck } return false } function checkChild(obj) { if(obj.checked) return false var parentId = obj.getAttribute('check-parent') var input = document.getElementById(parentId); input.checked = false; return false } </script> </head> <body> <form> <div id="check_group"> <div id="group_check_01"> <label for="check_01">親ﾁｪｯｸ<input type="checkbox" value="checkbox" id="check_01" onClick="checkParent(this);"></label><br> <label for="check_0101">子ﾁｪｯｸ1<input type="checkbox" value="checkbox" id="check_0101" check-parent="check_01" onClick="checkChild(this)"></label><br> <label for="check_0102">子ﾁｪｯｸ2<input type="checkbox" value="checkbox" id="check_0102" check-parent="check_01" onClick="checkChild(this)"></label><br> </div> <div id="group_check_02"> <label for="check_02">親ﾁｪｯｸ<input type="checkbox" value="checkbox" check-parent="check_02" id="check_02" onClick="checkParent(this);"></label><br> <label for="check_0201">子ﾁｪｯｸ1<input type="checkbox" value="checkbox" check-parent="check_02" id="check_0201" onClick="checkChild(this)"></label><br> </div> </form> </body> </html>
サンプルをご覧ください : http://study.jeromedupuis.net/teratail/114136/
:)
投稿2018/02/19 06:00
編集2018/02/19 06:07
総合スコア172
function checkParent(obj) {
var parentCheck = obj.checked;
var parentId = obj.id;
var oInputs = []
var getInput = true
var i = 1;
while(getInput == true) {
var childId = i
if(i < 10) {
childId = '0'+childId
}
var id = parentId+childId
var input = document.getElementById(id)
if(input) {
oInputs.push(input)
i++
} else {
getInput = false
}
}
if(oInputs.length > 1) return false
oInputs.map(function(input) {
input.checked = parentCheck
})
return false
}
oInputs.lengthは1以上の場合に、checked = trueを行わないです。
回答してくださり、ありがとうございます。
サンプルを拝見させて頂いたのですが複数のチェックボックスに対してもチェックが入っています。
質問投稿の本文を修正（具体例の追加）を行ったため確認していただけると助かります。
具体例の追加の通りに、更新しましたが?
http://study.jeromedupuis.net/teratail/114136/
ちゃんと理解出来てないかもしれません。
申し訳ありません。教えていただいたURLからだと正しく動作しなかったのですが
自身のデスクトップ上でファイルを新規に作り、ブラウザ上に表示させると正常に動作しました。
原因はわかりませんがこのプログラムは正しく動作していました。
ありがとうございます。
0
子が複数チェックされていて、親がチェックしたら子のチェックが外れるというのは
親がチェックされているけど子はチェックされていないという状態ですので
できないことはないですが仕様がおかしくないですか
普通はこんな感じでは？
- 子がすべてチェックされていれば親はチェックがはいり
- 子が一つでもチェックが外れたら親のチェックがはずれる
- 親がチェックしたら子はすべてチェック
sample
一応指定通りに書くとこんな感じ
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 document.querySelector('[type=checkbox][name=parent]').addEventListener('change',function(e){ 3 var flg=e.target.checked; 4 var len=document.querySelectorAll('[type=checkbox][name=child]:checked').length; 5 Array.prototype.forEach.call(document.querySelectorAll('[type=checkbox][name=child]'),function(x){ 6 if(flg) x.checked=(len>=2); 7 }); 8 }); 9});
HTML
1<input type="checkbox" name="parent">親<br> 2<input type="checkbox" name="child">子1 3<input type="checkbox" name="child">子2 4<input type="checkbox" name="child">子3 5<input type="checkbox" name="child">子4
別解
ごめんなさい、国語力の問題なので、質問を読み違えていたかもしれません。
もし親のチェックボックスの変更で、子が一つしかないときは連動、
子が複数あるときは非連動と読めばこんな感じですかね？
※とりあえず今回はjQueryで処理します
仕様があっているならピュアなjavascriptに書き下すことも考えます
javascript
1$(function(){ 2 $('input[type=checkbox]').filter(function(){ 3 return $(this).attr('id').match(/^check_\d{2}$/); 4 }).on('change',function(){ 5 var flg=$(this).prop('checked'); 6 var pid=$(this).attr('id'); 7 var child=$('input[type=checkbox]').filter(function(){ 8 var reg=new RegExp("^"+pid+"[0-9]{2}$",'g'); 9 return $(this).attr('id').match(reg); 10 }); 11 child.prop('checked',flg && child.length==1); 12 }); 13});
HTML
1<div id="group_check_01"> 2<label for="check_01">親ﾁｪｯｸ<input type="checkbox" value="checkbox" id="check_01"></label><br> 3<label for="check_0101">子ﾁｪｯｸ1<input type="checkbox" value="checkbox" id="check_0101"></label><br> 4<label for="check_0102">子ﾁｪｯｸ2<input type="checkbox" value="checkbox" id="check_0102"></label><br> 5</div> 6<div id="group_check_02"> 7<label for="check_02">親ﾁｪｯｸ<input type="checkbox" value="checkbox" id="check_02"></label><br> 8<label for="check_0201">子ﾁｪｯｸ1<input type="checkbox" value="checkbox" id="check_0201"></label><br> 9</div> 10</div>
ちなみに今回の親子関係をidで紐付けるのはちょっと面倒ですね
たとえば親子別々にclassをふって同じdiv内で親子関係を保つとかですかね
投稿2018/02/19 02:35
編集2018/02/19 05:20
総合スコア114839
私もちょっと質問者の②の仕様には疑問を感じました。
今回参考サイトにhttp://d.hatena.ne.jp/osakana_21/20080416/1208330846
を指定したのは自身が比較的理解しやすいプログラム内容であると判断し、このプログラムに①②の仕様を反映させたいと考えました。
本来であれば仕様に適したプログラム内容にすべきであったと思います。
上記のサイトではすべてチェックする/すべてチェックを外すプログラムが書かれていますが自身の作りたいプログラムは①②の仕様を満たしているプログラムです。
正確な仕様を記していませんでした。
申し訳ありません。
うーんと②の非選択になる。（自動的にチェックが付いている状態。） って矛盾してないですか？非選択=非チェックって事ではないんですか？結局どっちか良く分からないです。
とりあえず追記したsampleどおりで間違いないならそれで採用してください
あと親のチェックを外したときの処理はどうするかもわかりませんね
（今回は親のチェックが外れても何もしないという仕様です）
>unz.hori
申し訳ありません。文章修正が間違えていました。非選択＝非チェックという認識です。
>yambejp
sampleの作成ありがとうございます。
自身のブラウザ上で正しく動作できていないためプログラムの考察を行います。（子のチェックボックスが単数の場合にチェックが入らない状態。恐らく、
if(flg) x.checked=(len>=2);
上記のコードのlenの範囲を変更するとうまくいく気がしています。）
わからない箇所があれば質問してもよろしいでしょうか。
親のチェックが外れても何もしないという仕様で問題ありません。
私の理解が追いついていない気がしてきました。
別の視点で追記してあります。
逆に、具体的に例示されたチェックボックスをつかって
この状態の時にこうするとこうなる・・・のような
書き方をしてもらったほうがよいかもしれません
申し訳ありません。
文字数が多くなりすぎてしまったと感じてなるべく簡潔に書いてしまいました。
具体例を質問の本文に記載します。
あなたの回答
tips
プレビュー
