learnMedlem sedan jan. 20051 130 inlägg Om en checkbox är ikryssad så skall alla checkboxar i en viss <div> kryssas i.
Alltså om jag klickar på checkboxen med namnet "grupp1" så skall alla checkboxar i <div id="grupp1"> markeras, klickar jag sedan på checkboxen igen så avmarkeras checkboxarna.
Hur skall jag göra?
preyMedlem sedan jan. 2002341 inlägg var boolMarkAll = false;
function unmarkAll(){
var form = document.FORMNAME;
for(var i = 0; i < form.elements.length; i++){
var obj = form.elements[i];
if(obj.type == 'checkbox'){
obj.checked = '';
}
}
boolMarkAll = false;
var link = document.getElementById('LINKID');
link.innerHTML = 'Markera alla';
link.href = 'javascript: markAll()';
}
function markAll(){
var form = document.FORMNAME;
for(var i = 0; i < form.elements.length; i++){
var obj = form.elements[i];
if(obj.type == 'checkbox'){
obj.checked = 'checked';
}
}
boolMarkAll = true;
var link = document.getElementById('LINKID');
link.innerHTML = 'Avmarkera alla';
link.href = 'javascript: unmarkAll()';
}
Sen kanske man borde undvika innerHTML eftersom det inte är DOM standard.. Istället kan man köra document.createTextNode och fixa till det på så sätt.
preyMedlem sedan jan. 2002341 inlägg Jag hade i mitt exempel en länk istället för en input att klicka på, men principen är densamma.
God ide!
<script>function checkChildren(cLink){
var parentDiv = cLink.parentNode;
var els = parentDiv.getElementsByTagName("INPUT");
if (typeof cLink.tstate=="undefined")
cLink.tstate = false;
cLink.tstate = !cLink.tstate;
for(var i=0; i<els.length; i++){
if (els[i].type == "checkbox")
els[i].checked = cLink.tstate;
}
cLink.removeChild(cLink.firstChild);
cLink.appendChild(document.createTextNode(cLink.tstate?"Kryssa av alla":"Kryssa for alla"));
}
</script>
...
<form>
<div id="group1">
<a href="#" onclick="checkChildren(this);">Kryssa for alla</a>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div id="group2">
<a href="#" onclick="checkChildren(this);">Kryssa for alla</a>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</form>
Sorry, jag missuppfattade fragan.
<script>function checkChildren(cCheck){
var parentDiv = cCheck.parentNode.parentNode;
var els = parentDiv.getElementsByTagName("INPUT");
var tstate = cCheck.checked;
for(var i=0; i<els.length; i++){
if (els[i].type == "checkbox" && els[i] != cCheck)
els[i].checked = tstate;
}
}
</script>
...
<form>
<div id="group1">
<label for="master1"><input id="master1" type="checkbox" onclick="checkChildren(this);"/>Kryssa for alla</label><br />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div id="group2">
<label for="master2"><input id="master2" type="checkbox" onclick="checkChildren(this);"/>Kryssa for alla</label><br />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</form>
learnMedlem sedan jan. 20051 130 inlägg Tack för hjälpen, även om det tog lite tid.. ;)
:bire