Solved

Uncheck checkboxes with Prototype

Posted on 2008-10-10
6
3,055 Views
Last Modified: 2013-11-11
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
Comment
Question by:ARACK04
  • 2
  • 2
6 Comments
 
LVL 4

Accepted Solution

by:
husker475 earned 300 total points
ID: 22687668
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
 

Author Comment

by:ARACK04
ID: 22687758
Fantastic - is there any reason this wouldn't also work with a divID instead of a FormID?  
0
 
LVL 19

Assisted Solution

by:LordOfPorts
LordOfPorts earned 200 total points
ID: 22687760
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
 

Author Comment

by:ARACK04
ID: 22687773
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
 
LVL 19

Expert Comment

by:LordOfPorts
ID: 22688087
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question