Rekursiv lista, markera/avmarkera föräldrar/barn

MickeA.comMedlem sedan feb. 20034 441 inlägg

Frågan10 feb. 2014 04:46#1

Tjena hej!

Har en ul-lista enl. följande:

<ul id="MyTree">
<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document.png" /><span>Startsida</span></div></li>
<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_plain_new.png" /><span>Händelser</span></div>
	<ul>
	<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_dirty.png" /><span>Nyheter</span></div>
		<ul>
		<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_add.png" /><span>Lägg till</span></div></li>
		<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_view.png" /><span>Översikt</span></div></li>
		</ul>
	</li>
	<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_lock.png" /><span>Interna nyheter</span></div>
		<ul>
		<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_add.png" /><span>Lägg till</span></div></li>
		<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_view.png" /><span>Översikt</span></div></li>
		</ul>
	</li>
	<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/calendar.png" /><span>Kalender</span></div>
		<ul>
		<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_add.png" /><span>Lägg till</span></div></li>
		<li><input type="checkbox" name="Perm[]" /><div><img src="./Images/Icons/24/document_view.png" /><span>Översikt</span></div></li>
		</ul>
	</li>
	</ul>
</li>
...
...
...
...
</ul>

Tanken är nu att jag när jag trycker på en "förälder", ska alla dess barn's checkboxar markeras. Detta är inga problem:

$(function(){
	$('#PermissionsTree').on('click', 'div', function(){
		var cBox = $(this).parent().find("input:checkbox");
		
		if($(cBox).is(":checked")){
			$(cBox).removeAttr("checked");
		}else{
			$(cBox).attr("checked", "checked");
		}
	});
});

Utöver det vill jag även att om man i fallet ovan avmarkerar Nyheter > Lägg till resp. Nyheter > Översikt ska även Nyheter avmarkeras (eftersom det inte finns några markerade barn). På samma sätt, om jag avmarkerar dessa, och varesig Interna nyheter eller Kalender har några markerade, ska även hela blocket Händelser avmarkeras.

Här går jag bet helt och hållet. Alla tips och förslag välkomnas!

Tack!

voigtann1Medlem sedan juni 20019 519 inlägg

14 feb. 2014 07:16#2

Gå säkert att göra smidigare än detta men:

$('input:checkbox').on('change mystuff', function(e) {
  var li = $(this).closest('li');
  
  children(li, this.checked);
  parent(li);
});

var children = function($li, isChecked) {
  $li.find('ul input:checkbox').prop('checked', isChecked);
};

var parent = function($li) {
  var li = $li.parents('li');
  
  li.each(function() {
    var li = $(this);
    var checkbox = li.find('>ul input:checkbox:checked');
    li.find('>label>input').prop('checked', checkbox.length > 0);
  });
  
};

jag strippade bort lite i din kod att se vad som skulle hända:

http://jsbin.com/jebuz/2/edit

MickeA.comMedlem sedan feb. 20034 441 inlägg

14 feb. 2014 07:37#3

Grymt! :D