webForumDet fria alternativet

Markera alla checkboxar i en div

5 svar · 634 visningar · startad av learn

learnMedlem sedan jan. 20051 130 inlägg
#1

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
#2
	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
#3

Jag hade i mitt exempel en länk istället för en input att klicka på, men principen är densamma.

nitro2k01Medlem sedan aug. 20039 342 inlägg
#4

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>
nitro2k01Medlem sedan aug. 20039 342 inlägg
#5

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
#6

Tack för hjälpen, även om det tog lite tid.. ;)

:bire

260 ms totalt · 3 externa anrop · v20260731065814-full.102f7fcd
136 ms — hämta forumlista (db)
120 ms — hämta statistik (db)
135 ms — hämta tråd, inlägg och bilagor (db)