Archief - jQuery: checkboxjes automatisch selecteren/deselecteren

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Bram

Legacy Member
Hoi hoi

Situatie: ik heb een unordered list op mijn pagina van twee niveaus diep. In deze lijst worden items opgesomd die aan/afgevinkt kunnen worden. Nu zou die lijst zo moeten werken dat als je een parent afvinkt, alle subitems in de sublist ook afgevinkt worden, en andersom.

Andersom moet ook werken: als je alle subitems afvinkt, dan moet de parent ook automatisch afgevinkt worden.

Het eerste deel is me al gelukt met volgende jQuery code:

Code: 
$(document).ready( function () {
	$("#restrictions > li > input").each( function() {
		$(this).click(function() {
			var children = $(this).parent().children("ul").children("li").children("input");
			var checked = $(this).attr("checked");
			children.each( function() {
				$(this).attr("checked", checked);					
			});
		});
	});
});

Maar voor het tweede deel zit ik een beetje met de handen in het haar, m'n javascript trekt namelijk op niet veel en van jquery ken ik enkel het hoogstnodige. Is er iemand die me op het goede spoor kan zetten?

Alvast bedankt!


Edit: blijkbaar werkt volgende code ook perfect:
Code: 
$(document).ready( function () {
	$("#restrictions > li > input").click(function() {
		var children = $(this).parent().children("ul").children("li").children("input");
		children.attr("checked", $(this).attr("checked"));					
	});
});
Nog een heel stuk korter :p
B

Bram

Legacy Member
Ik heb de hele boel werkende gekregen met volgende code:

Code: 
$(document).ready( function () {
	$("#restrictions > li > input").click(function() {
		var children = $(this).parent().children("ul").children("li").children("input");
		children.attr("checked", $(this).attr("checked"));					
	});
	
	$("#restrictions li ul li input").click(function() {
		var inputs = $(this).parent().parent().find("input");
		var prev = '';
		var changed = false;
		inputs.each(function(i) {
			if (prev == '') {
				prev = $(this).attr("checked");	
			}
			
			if (prev != $(this).attr("checked")) {
				changed = true;	
			}
			
			prev = $(this).attr("checked");
		});
		
		if(!changed) {
			$(this).parent().parent().parent().children("input").attr("checked", prev);
		}
		
		if($(this).attr("checked") == true) {
			$(this).parent().parent().parent().children("input").attr("checked", true);
		}
	});
});

Maar ik vroeg me af of de tweede click functie niet eenvoudiger kon...
B

Bram

Legacy Member
heb ik weinig aan vrees ik... ik heb ff op het jquery irc kanaal gezeten en ben de code nu wat aan het herschrijven met betere selectors etc.

Ondertussen de code verandert naar dit:

Code: 
$(document).ready( function () {
	$("#restrictions input").click(function() {
		if($(this).is("#restrictions > li > input")) {
			// we clicked on a parent, set all children to same state
			$(this).parent().find("input").attr("checked", $(this).attr("checked"));			  
		} else {
			// we clicked on a child, time to set the parent.
			var siblings = $(this).parent().siblings().children("input");
			var parent = $(this).parents("li:not(:first)").children("input");
			
			if($(this).is(":checked")) {
				// checked so check parent
				parent.attr("checked", true);
			} else {
				// unchecked, so check siblings first before unchecking parent
				if(siblings.filter(":checked").length == 0) {
					parent.attr("checked", false);	
				}
			}
		}
	});
});
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan