[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3402
  • Last Modified:

Uncheck checkboxes with Prototype

Is it possible to easily, en masse uncheck all checkboxes in a certain div, and or with a certain name?

I know you can do this with JQuery, but is it build into Prototype?

Thanks
0
ARACK04
Asked:
ARACK04
  • 2
  • 2
2 Solutions
 
husker475Commented:
Found this:
http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/13ebae3fabe4a197

Piece of code extracted from the last post in the link above:

$('formId').getInputs('checkbox').invoke('setValue', false); // will
uncheck all checkboxes in the form 

Open in new window

0
 
ARACK04Author Commented:
Fantastic - is there any reason this wouldn't also work with a divID instead of a FormID?  
0
 
LordOfPortsCommented:
Yes, absolutely. The code snippet below has a complete example that represents one possible solution using the select method http://www.prototypejs.org/api/element/methods/select and the each method http://www.prototypejs.org/api/enumerable/each which in combination result in a simple 2-line statement:

var checkboxes = $('elementID').select('[type="checkbox"]');
checkboxes.each(function(s, index) { s.checked = false; });

You can also check the API documentation http://www.prototypejs.org/api for various other functions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uncheck Check Boxes with Prototype</title>
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
 
<script type="text/javascript">
 
function UncheckAllByID(_elementID)
{
	try
	{
		var checkboxes = $(_elementID).select('[type="checkbox"]');
		checkboxes.each(function(s, index) { s.checked = false; });
	}
	catch(e)
	{
		alert(e.description);
	}
}
 
</script>
</head>
<body>
 <div id="divID">
  <input type="checkbox" id="chk1" name="chk1" checked="checked" /> One<br />
  <input type="checkbox" id="chk2" name="chk2" checked="checked" /> Two<br />
  <input type="checkbox" id="chk3" name="chk3" checked="checked" /> Three<br />
 </div>
 
 <p><input type="button" value="Uncheck All" onclick="UncheckAllByID('divID');" /></p>
</body>
</html>

Open in new window

0
 
ARACK04Author Commented:
Wow - thanks LordOfPorts - I'm sorry, I had accepted the previous answer when I saw your pop up - can I re-assign points to split them up a bit?  Seems only fair.
0
 
LordOfPortsCommented:
If you would like you can use the "Request Attention" link in the upper section to ask for a points assignment change to split the points however either way it is fine as long as the solution is working properly for you I am fine with the assignment. Thank you for inquiring and your consideration!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now