---
title: "jQuery - markera checkboxar"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/187461-jquery-markera-checkboxar"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "metalboy"
published: "2011-07-20T10:08:04.000Z"
updated: "2011-07-20T13:37:59.000Z"
replies: 9
views: 1252
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/187461-jquery-markera-checkboxar"
---

# jQuery - markera checkboxar

## #1 — metalboy, 2011-07-20T10:08Z

Jag har stött på patrull när jag försöker göra ett gränssnitt för att skicka ut mail till enskilda mottagare/grupper.

Tanken är denna: Användaren ska kunna skapa mottagare och även kunna koppla dessa till grupper. Ex: Jag skapar mottagarna A, B, C och D, och även två grupper kallade X och Y. A och B skall tillhöra gruppen X, och A och C skall tillhöra gruppen Y. D tillhör inte någon grupp.

Jag tänkte då att man på ett enkelt sätt ska kunna skicka meddelanden till dessa mottagare genom att markera kryssrutor i ett formulär, ungefär som nedan

```
[ ][b]X[/b]
    [ ] A
    [ ] B

[ ][b]Y[/b]
    [ ] A
    [ ] C

[b]Ingen grupp[/b]
[ ] D
```

Om jag nu markerar kryssrutan bredvid gruppen X så skall samtliga medlemmar i den gruppen markeras, detta har jag löst. Men, eftersom A även är medlem i gruppen Y så vill jag ju att även den kryssrutan skall markeras (och tar jag bort markeringen på någon av kryssrutorna tillhörande A så ska samtliga "A-rutor" avmarkeras), och här kommer mitt problem. Jag har lyckats göra så att samtliga medlemmar i gruppen X markeras när jag markerar kryssrutan X, och jag har även lyckats göra så att samtliga A-rutor markeras/avmarkeras när jag trycker i kryssrutan A. Däremot har jag inte lyckats göra så att A-rutan under Y markeras när jag markerar gruppen X, och har ingen aning om hur koden för det skulle se ut. Oj, vad snurrigt det här blev nu. Hoppas någon förstår  :)

Och så lite kod för att förhoppningsvis underlätta förståelsen:

```
$(function() {
	$('input[name="rec_group"]').click(function() {
		$(this).parent().find('ul').find('input').attr('checked', this.checked);
	});

	$('input[name="rec[]"]').click(function() {
		$('input[name="rec[]"][value="'+this.value+'"]').attr('checked', this.checked);
	});
});
```

```
<form>
<ul class="group">
	<li>
		<input type="checkbox" name="rec_group" value="1" id="chk_1">
		<label for="chk_1" class="group">X</label>
		<ul class="group">
			<li>
				<input type="checkbox" name="rec[]" value="1" id="chk_2">
				<label for="chk_2">A</label>
			</li>
			<li>
				<input type="checkbox" name="rec[]" value="2" id="chk_3">
				<label for="chk_3">B</label>
			</li>
		</ul>
	</li>
</ul>
<ul class="group">
	<li>
		<input type="checkbox" name="rec_group" value="2" id="chk_4">
		<label for="chk_4" class="group">Y</label>
		<ul class="group">
			<li>
				<input type="checkbox" name="rec[]" value="1" id="chk_5">
				<label for="chk_5">A</label>
			</li>
			<li>
				<input type="checkbox" name="rec[]" value="3" id="chk_6">
				<label for="chk_6">C</label>
			</li>
		</ul>
	</li>
</ul>
<ul class="group">
	<li><strong>Ingen grupp</strong></li>
	<li>
		<input type="checkbox" name="rec[]" value="4" id="chk_7">
		<label for="chk_7">D</label>
	</li>
</ul>
</form>
```

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

## #2 — voigtann1, 2011-07-20T10:41Z

Är det typ:

```
$(":checkbox[name=rec_group]").change(function() {
var value = this.checked;
  $(this).parent().find(".group :checkbox").attr("checked", value ).each(function() {
    $("[value="+this.value+"]").attr("checked", value );
  });
});
```

Du är ute efter?

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

## #3 — metalboy, 2011-07-20T10:47Z

Nej, inte riktigt, men det kanske är ett steg i rätt riktning. :)

Med den koden blir samtliga grupper valda. Dvs, väljer jag grupp X blir även grupp Y vald. Det jag vill är att när jag väljer grupp X så ska A och B också väljas, men även A under Y (eftersom A ingår i både X och Y). Y och C ska däremot inte vara valda.

Edit:
Jag hade dessutom ett fel i min lokala kod. Det enda felet nu är att gruppen Y väljs. A väljs alltså i båda grupperna, och C är fortfarande inte ikryssad. Men detta kanske jag kan lösa själv. Ska testa en sak.

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

## #4 — voigtann1, 2011-07-20T10:50Z

Okej, återkommer strax ;)

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

## #5 — metalboy, 2011-07-20T10:51Z

Tack voigtann1.

Ditt förslag ledde mig i rätt riktning.
Följande kod fungerar för mig:

```
$(":checkbox[name='rec_group']").change(function() {
	var value = this.checked;
	$(this).parent().find(".group :checkbox").each(function() {
    	$("[name='rec[]'][value="+this.value+"]").attr("checked", value );
	});
});
```

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

## #6 — voigtann1, 2011-07-20T11:00Z

```

var allRec = $(":checkbox[name='rec[]']").change(function() {
  allRec.filter("[value="+this.value+"]").attr("checked", this.checked);
});

var groups = $(":checkbox[name='rec_group']").change(function() {
  $(this).parent().find(".group :checkbox").attr("checked", this.checked).trigger("change");
});
```

?

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

## #7 — voigtann1, 2011-07-20T11:02Z

> **[metalboy skrev:](https://www.webforum.nu/p/1537554)**
>
> Tack voigtann1.
> 
> Ditt förslag ledde mig i rätt riktning.
> Följande kod fungerar för mig:
>
>
> ```
> $(":checkbox[name='rec_group']").change(function() {
> 	var value = this.checked;
> 	$(this).parent().find(".group :checkbox").each(function() {
>     	$("[name='rec[]'][value="+this.value+"]").attr("checked", value );
> 	});
> });
> ```

Fast skall du inte om du kryssa i "A" så skall alla "A" markeras?

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

## #8 — metalboy, 2011-07-20T11:04Z

Jo, fast A har inte name='rec_group', utan name='rec\[\]'. Så jag har följande också:

```
$('input[name="rec[]"]').click(function() {
    $('input[name="rec[]"][value="'+this.value+'"]').attr('checked', this.checked);
});
```

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

## #9 — voigtann1, 2011-07-20T11:10Z

> **[metalboy skrev:](https://www.webforum.nu/p/1537557)**
>
> Jo, fast A har inte name='rec_group', utan name='rec\[\]'. Så jag har följande också:
>
>
> ```
> $('input[name="rec[]"]').click(function() {
>     $('input[name="rec[]"][value="'+this.value+'"]').attr('checked', this.checked);
> });
> ```

Nej, det förstå jag med, men du har inte bundit A,B,C  eller D till något, och snälla: ANVÄND INTE CLICK eventet på en checkbox

```
var checkState = function() {
  var groupCheckboxes = $(this).parent().find(".group").find(":checkbox");
      allChecked = groupCheckboxes.length === groupCheckboxes.filter(":checked").length;

  $(this).attr("checked", allChecked);
};

var allRec = $(":checkbox[name='rec[]']").bind("change",function() {
  allRec.filter("[value="+this.value+"]").attr("checked", this.checked).parent().parent().closest("li").find(":checkbox:first").trigger("change.checkState");
});

var groups = $(":checkbox[name='rec_group']").bind("change", function() {
  $(this).parent().find(".group :checkbox").attr("checked", this.checked).trigger("change");
}).bind("change.checkState", checkState);
```

Känns som detta är lite mer normalt beteende, om jag kryssar i A och B så borde ju gruppen bli markerad att jag har markerat allt i den gruppen, eller?

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

## #10 — metalboy, 2011-07-20T13:37Z

Tackar :-)
Funkar perfekt

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/187461-jquery-markera-checkboxar