JQuery でhidden項目の設定や色の切り替えがうまくいきません

JQuery でボタンの色の切り替えやhidden項目の設定などをしようとしていますが、
構造が複雑すぎて混迷を深めています。

仕様としては
ラベルをクリックすると、その背景色が変更されます。(そのラベルのクラス属性にcheckedが追加されます。)そして、リストにその名称が追加されると同時にPOST用にhidden要素が追加されます。逆に、もう一度クリックすると色は白色に戻ります。（クラス属性からcheckedが削除されます。）
下記のようなプログラムを作成したのですが、デバッグ用のalertが異なる出力をして
色が反転しません。リストから削除されなかったり、hidden項目が削除されなかったりします。（リストからの削除とかの処理はまだ追加していません）


$('#additional_member').on('click', '.sb_member', function(){
	var index	=	$(".sb_member").index(this) + 1;
	var val		=	$("#sidebar_member" + index).val();
	var str		=	$("span#member_name" + index).html();
	//現在のラベルがチェックされているとき
	if ( $("label#label_sb" + index).hasClass("checked") ){
		var prm		=	"li#list_elm" + index;
		$(prm).remove();
		var hidden_prm	=	"#member_id" + index;;
		$(hidden_prm).remove();
		$("label#label_sb" + index).removeClass('checked');
	}else{
		var count_li	=	$("ul#member_list li").length;
		$('<input>').attr({
			type: 'hidden',
			class: 'member',
			id: 'member_id' + index ,
			name: 'member[]',
			value: val
		}).appendTo('div#add_member');
		$("label#label_sb" + index).addClass('checked');
		//string for assigned member section
		var str_li = '<li id="list_elm' + (count_li + 1) + '">' + str + '</li>';
		$('ul#member_list').append(str_li);
	}
});

//HTML
//ラベルボタンを押すと色が反転する。（checked属性が追加）
//もう一度押すと色が反転する（checked属性が削除）

 <div class="checkbox" id="additional_member">
    <input type="checkbox" name="checkbox_member" id="sidebar_member1" class="cb_member" value="3254" />
    <label for="label_sb1" class="sb_member" id="label_sb1"><span id="member_name1">高木 優斗</span></label>
    <input type="checkbox" name="checkbox_member" id="sidebar_member2" class="cb_member" value="1895" />
    <label for="label_sb2" class="sb_member" id="label_sb2"><span id="member_name2">吉岡 健二</span></label>
</div>

//HTML(部分抜粋)
//hidden項目を設定する場所
<div id="add_member"></div>

//メンバー一覧を設定する場所
<ul id="member_list"></ul>

ラベルにcheckedが付いていないのに、if条件判定で反対の条件に処理されます。
また複数のラベルに対して処理の影響が及んでしまったりと挙動がおかしい状態になります。

質問の意図が伝わるか不安ですが、宜しくお願いいたします。

（追記）

現状のHTML
  <div class="checkbox" id="additional_member">
<input type="checkbox" name="checkbox_member" id="sidebar_member1" class="cb_member" value="155" /><label for="sidebar_member1" class="sb_member" id="label_sb1"><span id="member_name1">山本 浩二</span></label>
<input type="checkbox" name="checkbox_member" id="sidebar_member2" class="cb_member" value="155" /><label for="sidebar_member2" class="sb_member" id="label_sb2"><span id="member_name2">高橋 賢一</span></label>
</div>

行動規範の内容に同意します

回答1件

ベストアンサー

結論を一言で言うと、

javascript
1var str_li = '<li id="list_elm' + (count_li + 1) + '">' + str + '</li>';

この行を

javascript
1var str_li = '<li id="list_elm' + index + '">' + str + '</li>';

にすれば直るでしょう。

ラベルをクリックしたらそのメンバーのidがリストに追加されたり削除されたりするという処理のはずなのに、この追加処理だけ現在のメンバー一覧の数に応じたidが振られてしまっています。

ブラウザでF12を押したらデベロッパーツールと言うものが出てきます。
デベロッパーツールを使えば、現在各タグがどんな状態にあるのか（どんなidが振られているのか）確認できますので、デバッグに便利ですよ。

##修正点追記

おかしい挙動の原因は、label関連の指定がおかしかったせいもあったようですね。

html
1 <div class="checkbox" id="additional_member">
2    <input type="checkbox" name="checkbox_member" id="sidebar_member1" class="cb_member" value="3254" />
3    <label for="sidebar_member1" class="sb_member" id="label_sb1"><span id="member_name1">高木 優斗</span></label>
4    <input type="checkbox" name="checkbox_member" id="sidebar_member2" class="cb_member" value="1895" />
5    <label for="sidebar_member2" class="sb_member" id="label_sb2"><span id="member_name2">吉岡 健二</span></label>
6</div>

</label>指定がないせいで、吉岡健二のほうをクリックしたら、高木優斗のほうもクリックされたことになっていました。
また、labelのfor指定がチェックボックスのidになっていないせいで、クリックしてもチェックボックスのチェックが付かない状態でした。

あと、checkedについて勘違いされているような気がしますので念のため書いておきますが、ラベルにcheckedクラスをつけるのと、チェックボックスをチェック状態にするのには関連性はありませんよ。

上述のindex記述と、label部分の修正を行えば正常動作しますが、せっかくなので、おすすめの記述を書いておきます。

html
1<!DOCTYPE HTML>
2<html>
3<head></head>
4<body>
5<div class="checkbox" id="additional_member">
6	<label>
7		<input type="checkbox" name="checkbox_member" class="cb_member" data-member="1" value="3254" />
8		<span>高木 優斗</span>
9	</label>
10	<label>
11		<input type="checkbox" name="checkbox_member" class="cb_member" data-member="2" value="1895" />
12		<span>吉岡 健二</span>
13	</label>
14</div>
15
16<div id="add_member"></div>
17
18<ul id="member_list"></ul>
19
20<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
21<script>
22$('#additional_member').on('click', '.cb_member', function(){
23    var $elem = $(this);
24    var member_id  = $elem.data("member");
25    var val = $elem.val();
26    var str = $elem.parents("label").find("span").text();
27    //チェックボックスはチェック状態か？
28    if ( $elem.prop('checked') ){
29        $('<input>').attr({
30            type: 'hidden',
31            class : 'member',
32            id: 'member_id' + member_id,
33            name: 'member[]',
34            value: val
35        }).appendTo('#add_member');
36        var str_li = '<li id="list_elm' + member_id + '">' + str + '</li>';
37        $('#member_list').append(str_li);
38        $elem.addClass('checked');
39    }else{
40        $("#member_id" + member_id).remove();
41        $("#list_elm" + member_id).remove();
42        $elem.removeClass('checked');
43    }
44});
45</script>
46</body>
47</html>

この記述のポイントはこんなところです。

labelはforでid指定すると項目が増えるごとにマジックナンバーの入力が増えるため、<label>～</label>で囲む方を利用します。
また、labelを囲み方式することで、メンバーidは一箇所だけ入力しておけば、parents,findを駆使して同一グループ内のデータを取り出せるようになります。
クリック判定はラベルではなくチェックボックスで行います。
これは私個人のルールですが、indexという変数名は、配列内の順番を示すときにだけ使い、idをベースとした管理をするときは**_idのような変数にします。目的に沿った変数名にしておくと、余計な混乱を招きません。
.prop('checked')でチェック状態かどうかを取得できますので、それを利用します。checkedクラスを付ける意味はこれでほとんどありませんが、CSSの都合でつけておきたいかもしれませんので一応残しています。
追加する3項目をA,B,Cという順番で処理するなら、削除するときもA,B,Cの順番で処理します。

投稿2017/08/05 09:42

編集2017/08/06 00:27

zohnam

総合スコア1441

hidepon

2017/08/05 22:43

ご回答有難うございます。一番の問題として、"label#label_sb" + index　にcheckedがついていないのに .hasClass("checked")　の判定でtrueとなります。なので色の切り替えが出来ません。つまりcheckedの有無で色のON ,OFFができずに困っています。なぜか理由が分からず困っています。ご教授頂ければ幸いです。

hidepon

2017/08/06 10:16

ご回答有難うございます。すごくレベルが高過ぎて、理解するのに時間が掛かりそうです。実際のソースではlabelの閉じタグは設定されていました。スミマセン。コピペミスです。現状のソースでは考え方も間違っているんですかね！？？？判定が逆になってしまって色の切り替えがうまくいきません。ちょっと違ったコンセプトでlabelタグにchecked属性を設定し、色変更をするということになっています。色が付いた状態から、白地の状態（checkedなし）に切り替わりません。良く分からない状態になっています。よろしくお願いいたします。