Solved

Uncheck checkboxes with Prototype

Posted on 2008-10-10
6
3,180 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 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

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
Suggested Courses

624 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