9 svar · 1 252 visningar · startad av metalboy
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");
});
?
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);
});
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