jQuery - markera checkboxar

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>

Ä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?

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.

Okej, återkommer strax ;)

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 );
	});
});

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");
});

?

metalboy skrev:

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?

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);
});

metalboy skrev:

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?

Tackar :-)
Funkar perfekt