Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Uncheck checkboxes with Prototype

Posted on 2008-10-10
6
Medium Priority
?
3,253 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
6 Comments
 
LVL 4

Accepted Solution

by:
husker475 earned 1200 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 800 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

705 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