Solved

Uncheck checkboxes with Prototype

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
REST call Failing 1 39
Javascript: Mouseup doesn't follow mousedown 13 60
Form submit takes only for one form 23 53
Natural height and jquery 6 40
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

734 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