javascript: check all

Door Bo az op 16-12-2005 14:42

3.060 views

Ik heb een formulier met een willekeurige lengte bv:

<input type="checkbox" name="add[]" value="true" checked="checked" />
<input type="checkbox" name="add[]" value="true" checked="checked" />
<input type="checkbox" name="add[]" value="true" checked="checked" />

nu wil ik deze hele lijst in één keer unchecken met een knop oid.

Ik heb al wat met google gezocht en wat gevonden, maar ik krijg het niet echt werkend.

klik
was het meest duidelijke voorbeeld, maar zodra ik daar [] aan toevoegde werkte het niet meer.

Iemand enig idee? Al vast bedankt!

Jan Koehoorn

16-12-2005 14:48

Ik zou zoiets doen:

function uncheck_all () {
var x = document.GetElementsByTagName ('input');
var n = x.length;

for (i = 0; i < n; i++) {
if (x[i].type == 'checkbox') {
x[i].checked = false;
}
}
}

Bo az

16-12-2005 16:11

Dat werkt nog niet direct, ik kwam op internet nog iets tegen wat vergelijkbaar is met dat van jou.

Maar misschien dat je me kan vertellen wat ik hier fout doe:

<html><head>
<script type="text/javascript">
<!--
function uncheck_all()
{
	for(i=0; i<document.items.length; i++)
	{
		document.items[i].checked = false;
	}
}

function check_all()
{
	for(i=0; i<document.items.length; i++)
	{
		document.items[i].checked = true;
	}
}
// -->
</script>
</head><body>
<form name="mylist">
  <input type="checkbox" name="checkGroup[]" value="first">First<br>
  <input type="checkbox" name="checkGroup[]" value="second">Second<br>
  <input type="checkbox" name="checkGroup[]" value="third">Third<br>
  <input type="checkbox" name="checkGroup[]" value="fourth">Fourth<br>
</form>

<a href="javascript:check_all()">flag all items</a> | 
<a href="javascript:uncheck_all()">flag all items</a>
</body></html>

Jelmer -

16-12-2005 16:14

Dit wil alles in de hele pagina proberen te checken. En een plaatje kan niet gechecked worden, dus dan zou deze een error geven. Maar porbeer die van Jan eens, en kijk in de JS-console van Firefox wat de fout is. Als je dan nog niet weet, post de fout dan hier :)

Bo az

16-12-2005 16:18 gewijzigd op 16-12-2005 16:22

Wist niet eens dat er een javascript console bestond, maar die zegt:
document.GetElementsByTagName is not a function.

Edit: via google kom ik op:
document.getElementsByTagName

nu werkt het!

Jan Koehoorn

16-12-2005 16:19 gewijzigd op 16-12-2005 16:21

document.items is geen W3C DOM. Ik heb je code ff aangepast:


<html><head>
<script type="text/javascript">
<!--
function set_checkboxes (state)
{
	var x = document.getElementsByTagName ('input');
	var n = x.length;
	
	for (i = 0; i < n; i++) {
		if (x[i].type == 'checkbox') {
			x[i].checked = state;
		}
	}
}

// -->
</script>
</head><body>
<form name="mylist">
  <input type="checkbox" name="checkGroup[]" value="first">First<br>
  <input type="checkbox" name="checkGroup[]" value="second">Second<br>
  <input type="checkbox" name="checkGroup[]" value="third">Third<br>
  <input type="checkbox" name="checkGroup[]" value="fourth">Fourth<br>
</form>

<a href="javascript:set_checkboxes(true)">flag all items</a> |
<a href="javascript:set_checkboxes(false)">unflag all items</a>
</body></html>

Link: werkend voorbeeld

edit: getest in FF, Opera en IE

Bo az

16-12-2005 16:24

Nog getest ook :) dankje!

Jan Koehoorn

16-12-2005 16:28

Boaz schreef op 16.12.2005 16:24
Nog getest ook :) dankje!

Graag gedaan! Ja, testen moet wel hoor, vind ik. Toch minstens in IE, FF, Opera en liefst ook in Safari, maar die heb ik helaas niet zelf.

Jelmer -

16-12-2005 16:42

Werkt prima in Safari :)

Reageren

Inloggen om te reageren