Solved

Uncheck checkboxes with Prototype

Posted on 2008-10-10
6
2,977 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now