02 May, 2009

Check/Uncheck alle checkboxes

Categoriën: form |javascript

Door middel van één checkbox te klikken, kan je alle checkboxes aanvinken (véél gezien bij b.v. Flickr, Gmail, etc…). Dit gebeurd met JavaScript.

HTML

<form id="myform" action="post">
<p><input type="checkbox" name="foo" /><br />
<input type="checkbox" name="bar" /></p>
<p>Check all: <input type='checkbox' name='checkall' onclick='checkedAll();'/></p>
</form>

JavaScript

<![CDATA[
checked = false;
	function checkedAll () {
	if (checked == false){checked = true}else{checked = false}
	for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
	document.getElementById('myform').elements[i].checked = checked;
	}
}
]]>

Gerelateerde Snippets

3 Reacties op "Check/Uncheck alle checkboxes"

Reen

May 12th, 2009 at 20:41

1

Bad practice…

Javascript hoort net als CSS niet in je HTML thuis.

Je kunt met javascript bepaalde functies aan een element binden.

Voorbeeld:
[code]var el = docuement.getElementById("all");
el.onclick = function()
{
checkAll();
}[/code]

Daarnaast ga je ervanuit dat alle elementen binnen je form checkboxes zijn, wat ook niet altijd het geval is.

Ook zal deze checkbox niet automatisch checked worden indien alles geselecteerd is en hij zal ook niet automatisch unchecked worden wanneer niet alles geselecteerd is. Dit zorgt voor verwarrende functionaliteit.

Mark

May 13th, 2009 at 19:51

2

Je hebt 100% gelijk Reen, ik zal ervoor zorgen dat ik dit in de toekomst ook zo neerzet, dus eigenlijk kwalitatieve snippets enkel nog maar toelaat.
Deze werd mij toegezonden, maar dit is natuurlijk geen excuus.

Piet

October 18th, 2009 at 14:16

3

Klopt het dat het bovenstaande javascript niet volledig is?

“Check/Uncheck alle checkboxes”

Reactie formulier


Demo: Check/Uncheck alle checkboxes:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.