---
title: "Rekursiv lista, markera/avmarkera föräldrar/barn"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/191995-rekursiv-lista-markera-avmarkera-föräldrar-barn"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "MickeA.com"
published: "2014-02-10T04:46:28.000Z"
updated: "2014-02-14T07:37:49.000Z"
replies: 2
views: 814
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/191995-rekursiv-lista-markera-avmarkera-föräldrar-barn"
---

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

## #1 — MickeA.com, 2014-02-10T04:46Z

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!

Permalänk: https://www.webforum.nu/p/191995

## #2 — voigtann1, 2014-02-14T07:16Z

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>

Permalänk: https://www.webforum.nu/p/2315446

## #3 — MickeA.com, 2014-02-14T07:37Z

Grymt! :D

Permalänk: https://www.webforum.nu/p/2315448

---

Tråden på webben: https://www.webforum.nu/amne/javascript/191995-rekursiv-lista-markera-avmarkera-föräldrar-barn