9 svar · 1 248 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