jQueryの「.parents」や「.parent」で上手な方法を教えてほしいです。

Question

###目的
自動でチェックする機能をかなり頑張って作ったのですが、親要素の取得で躓いています。上手な取得方法を知りたいです。

###現状と問題
子チェックしたときに、「.parents」（←sがついてる）を使っているせいで、自分の親だけでなく別の親のチェックボックスも拾ってチェックを入れてしまうのです。

下記コードで言うと、「親apple」の「子１・２」にチェックを入れると、.paretnsのせいで「別の親grape」にまでチェックが入ってしまいます。

どなたか、上手な方法をご教示頂けませんでしょうか？

▼動くサンプル
https://jsfiddle.net/79cqw3fh/

▼そのコード

<ul class="c-checklist">
	<li><input id="c-apple" type="checkbox" name="chk_fluits2">
		<label for="c-apple" class="check_label_c">
			<p>apple</p>
			<ul>
				<li><input id="c-apple-1" class="check-c check-1" type="checkbox" name="chk_fluits" value="c-apple-1" target="c-apple-1"><label for="c-apple-1" class="check_label_1">1</label></li>
				<li><input id="c-apple-2" class="check-c check-2" type="checkbox" name="chk_fluits" value="c-apple-2" target="c-apple-2"><label for="c-apple-2" class="check_label_2">2</label></li>				
			</ul>
		</label>
	</li>
	<li><input id="c-grape" type="checkbox" name="chk_fluits2">
		<label for="c-grape" class="check_label_c">
			<p>grape</p>
			<ul>
				<li><input id="c-grape-1" class="check-c check-1" type="checkbox" name="chk_fluits" value="c-grape-1" target="c-grape-1"><label for="c-grape-1" class="check_label_1">1</label></li>
				<li><input id="c-grape-2" class="check-c check-2" type="checkbox" name="chk_fluits" value="c-grape-2" target="c-grape-2"><label for="c-grape-2" class="check_label_2">2</label></li>				
			</ul>
		</label>
	</li>
</ul>

////親チェックしたとき
//子を２つともチェックする。または子が２つチェックされていたら外す。
(function($){
$('input[name="chk_fluits2"]').change(function(){

	var childfluits = $(this).parent().find('input[name="chk_fluits"]');
	var checkcount = $('.check-c:checked').length;
  
  	if (checkcount == 2 ){
			$(childfluits).prop('checked', false);
			$(this).prop('checked', false);      
  	} else {

      	if ($(this).prop("checked") == true) {
      	  $(childfluits).prop('checked', true);
     	 } else {
      	  $(childfluits).prop('checked', false);
      	}
  	}

});
})(jQuery);


////子チェックしたとき
//２つともチェックが入ったら、親チェックも入れる
(function($){
$('input[name="chk_fluits"]').change(function(){

	var parentfluits = $(this).parents().find('input[name="chk_fluits2"]');
	var checkcount = $('.check-c:checked').length;
  
  	if (checkcount == 2 ){
        $(parentfluits).prop('checked', true);		
		}

});
})(jQuery);


////子チェックしたとき
//２つともチェックが外されたら、親チェックも外す
(function($){
$('input[name="chk_fluits"]').change(function(){

	var parentfluits = $(this).parents().find('input[name="chk_fluits2"]');
	var checkcount = $('.check-c:checked').length;
  
  	if (checkcount == 0 ){
        $(parentfluits).prop('checked', false);		
		}

});
})(jQuery);

あとできれば、上の冗長であろうjQueryを、もっとスマートにもしたいのですが、どのような考え方をすればいいかお導き頂けると嬉しいです。

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

Comments

[m.ts10806]

jqurty・・・。 jQueryとし、タグに追加しておいてください。

[x_x]

label要素の子としてpやulは取れないので、まずはHTMLを修正してもらえないでしょうか？

[退会済みユーザー]

mts10806さん、ご指摘ありがとうございます。２点修正いたしました。

[退会済みユーザー]

x_xさん、ありがとうございます。チェックボックスが大量にあるためHTMLはこのままでいきたいのですが、その場合は今回のようなチェック連動機能はあきらめる他なさそうでしょうか？

[x_x]

p,ulを無視するとしてもlabel要素の子孫にlabelが示していないinputがあり、誤動作する恐れがあります

[x_x]

指摘しても直さないということでしょうか？　壊れたHTMLには回答する気になりません。

[退会済みユーザー]

あ、いえ、とんでもないです。直し方がわからなくって、苦戦しているところでした。そもそもその変なlabelによって、親のチェック範囲を広くする（子のチェックエリアを囲む）。という目的があったのです。で、それが壊れているとなりますと、では、どうやればlabelを消しながらも親のチェック範囲を広くたもつことができるのか。と、そこがわからず、返信に苦慮していた次第です。誤解させてしまってごめんなさい。事後報告で恐縮ですけれど、その後yambejpさんが先述の修正をして頂いたHTMLまで書いたくださったので、解決に至りました。ご検討いただき大変ありがとうございます。

Answer 1

labelが変なのではずしました
そもそもchk_fluits2とchk_fluitsには親子関係がないので、
多少工夫が必要でしょう

$(function(){
  $('input[name="chk_fluits"]').on('change',function(){
    var p=$(this).closest('ul').closest('li').find('input[name="chk_fluits2"]');
    var c=$(this).closest('ul').find('input[name="chk_fluits"]');
    if(c.filter(':checked').length==2) p.prop('checked',true);
    if(c.filter(':checked').length==0) p.prop('checked',false);
  }).trigger('change');
});

<ul class="c-checklist">
<li><input id="c-apple" type="checkbox" name="chk_fluits2">
<p>apple</p>
<ul>
<li><input id="c-apple-1" class="check-c check-1" type="checkbox" name="chk_fluits" value="c-apple-1" target="c-apple-1"><label for="c-apple-1" class="check_label_1">1</label></li>
<li><input id="c-apple-2" class="check-c check-2" type="checkbox" name="chk_fluits" value="c-apple-2" target="c-apple-2"><label for="c-apple-2" class="check_label_2">2</label></li>                
</ul>
</li>
<li><input id="c-grape" type="checkbox" name="chk_fluits2">
<p>grape</p>
<ul>
<li><input id="c-grape-1" class="check-c check-1" type="checkbox" name="chk_fluits" value="c-grape-1" target="c-grape-1"><label for="c-grape-1" class="check_label_1">1</label></li>
<li><input id="c-grape-2" class="check-c check-2" type="checkbox" name="chk_fluits" value="c-grape-2" target="c-grape-2"><label for="c-grape-2" class="check_label_2">2</label></li>                
</ul>
</label>
</li>
</ul>

追記

なるほど仕様がいろいろあるのですね

• ピンクの領域をクリックすると、チェックが一つでもあれば消え、何もなければ全チェック
• 親をチェックすると子が全チェック、親のチェックを外すと子のチェックが全部はずれる
• 子のチェックを両方すると親がチェックされ、このチェックを両方はずすと親のチェックが外れる
• このチェックが片方の場合は親は反応しない

上記の仕様をを入れ込むとこんな感じでしょうか？
いずれにしろ、親に対するラベルは辞めたほうがいいです。

.sitsumon {
    background: aqua;  
}
.c-checklist li {
    background: pink;
    margin: 10px;
    list-style: none;
    padding: 5px;
}
.c-checklist li ul li label {
    background: #000;
    color: #FFF;
    padding: 1px 10px 1px 10px;
}

$(function(){
  $('input[name="chk_fluits"]').on('change',function(){
    var p=$(this).closest('ul').closest('li').find('input[name="chk_fluits2"]');
    var c=$(this).closest('ul').find('input[name="chk_fluits"]');
    if(c.filter(':not(:checked)').length==0) p.prop('checked',true);/*改良*/
    if(c.filter(':checked').length==0) p.prop('checked',false);
  }).trigger('change');
  $('input[name="chk_fluits2"]').on('change',function(){
    $(this).siblings().find('input[name="chk_fluits"]').prop('checked',$(this).prop('checked'));
  }).trigger('change');
  $('.c-checklist input[type=checkbox],.check_label').on('click',function(e){
    e.stopPropagation();
  });
  $('.c-checklist>li').on('click',function(e){
    $(this).find('[type=checkbox]').prop('checked',$(this).find('[type=checkbox]:checked').length==0?true:false);
  });
});

<ul class="c-checklist">
<li><input id="c-apple" type="checkbox" name="chk_fluits2">
<p>apple</p>
<ul>
<li><input id="c-apple-1" class="check-c check-1" type="checkbox" name="chk_fluits" value="c-apple-1" target="c-apple-1"><label for="c-apple-1" class="check_label">1</label></li>
<li><input id="c-apple-2" class="check-c check-2" type="checkbox" name="chk_fluits" value="c-apple-2" target="c-apple-2"><label for="c-apple-2" class="check_label">2</label></li>                
</ul>
</li>
<li><input id="c-grape" type="checkbox" name="chk_fluits2">
<p>grape</p>
<ul>
<li><input id="c-grape-1" class="check-c check-1" type="checkbox" name="chk_fluits" value="c-grape-1" target="c-grape-1"><label for="c-grape-1" class="check_label">1</label></li>
<li><input id="c-grape-2" class="check-c check-2" type="checkbox" name="chk_fluits" value="c-grape-2" target="c-grape-2"><label for="c-grape-2" class="check_label">2</label></li>                
</ul>
</label>
</li>
</ul>

Comments

[退会済みユーザー]

yambejpさん、いつもありがとうございますっ！

＞labelが変なのではずしました

実はlabelは「親の中に子を置きたい」ために書きました。

■質問のJSfiddle（https://jsfiddle.net/79cqw3fh/）
→親のピンク部分をクリックすると、中の子にチェックが入ります。ところが、

■ご回答のJSfiddle（https://jsfiddle.net/79cqw3fh/3/）
→親のピンク部分をクリックしても、中の子にチェックが入らず、親のチェックボックスをクリックしなければなりません。

と、このように、labelがはずされてしまうと、ちょっとだけ機能が理想と変わってしまい、少し、、残念ではあります。(>_<)

でも、ifからlength==2のあたりの書き方、とても勉強になりました。どうもありがとうございます。

[yambejp]

labelがfor-idでつながっているので、子の状態を無視して
常に反応してしまうので、この場合labelを設定するという選択肢は
混乱を招くだけでしょう

[退会済みユーザー]

って、すみません！
HTMLは質問のままで、jqueyだけ戴けば、理想の機能になるのですね。よく確認せずになんだか文句のようなことを言ってしまい、大変失礼いたしました！

ところで、上述したように「ピンクをクリックして子を反応させたい」という理想の機能があるのならば、labelは変ではありませんよね？

[退会済みユーザー]

16:35に頂戴したご返信、ただいま拝見いたしました。

なるほど。やはり変なのですか。悩みます。。
ご指摘ありがとうございます。

[yambejp]

仕様をいろいろ入れ込んで追記しました

[退会済みユーザー]

高評価が一度しか押せないのがくやしいです。笑
HTMLの直し方がわからずちょうど悩んでいるところだった上、なんと！直ったHTMLに適切なJqueryまで書いて頂いているとは、思ってもいませんでした。
今回もとても助かりました。まことにありがとうございます!!

[退会済みユーザー]

失礼いたします。少し脇道なのですけれど、

(function($){
$('input[name="chk_fluits2"]').on('change',function(){
console.log("hello");
});
})(jQuery);

と書いても、「読み込みんだとき」にhelloが出力されてしまうのは、なぜでしょうか？

これは「chk_fluits2の値が変化したとき」に出力されるハズではないのでしょうか？？

実は値が変化したときにやりたい操作を追加で思いついたのですが、なかなかできずに悩み中でして。(>_<)

あと、

on('change',function(){

は

.change(function() {

と全く一緒でしょうか？

お手すきの折にご返信いただければと思いますです。

[yambejp]

$('input[name="chk_fluits2"]').on('change',function(){
$(this).siblings().find('input[name="chk_fluits"]').prop('checked',$(this).prop('checked'));
}).trigger('change');

と、ロード時にchangeイベントを呼んでるからですね、
チェックボックス同士が相関関係をもっているため
そのリンクを確保するためにload時に
一度プログラム的にchangeイベントを走らせていています。

[yambejp]

それと
・on('change',function(){
・.change(function() {
は、一緒ですが、onはイベントが変わっても切り口が一つなので便利ですし
複数のイベントを設定したりできるので私はon派でです

[退会済みユーザー]

.trigger でchangeをそのようにしているのですか！私が console.log を書いたのは、

ご提示戴いたこちら

$(function(){
…
});

の外に書いたのですが、それでも .toggle はずっと引きずって有効なのですね。うーん、難しいです。

使い方が高レベルすぎて仰ることが３割しかわかりませんが笑、.trigger や .siblings など全く知らないものに触れるキッカケになりました。ありがとうございます。

on('change',function(){ についてもありがとうございます。

Answer 2

https://api.jquery.com/closest/

Comments

[退会済みユーザー]

defghi1977さん、こんにちは。ありがとうございます。拝見してまいります。