I'm using prototype 1.6.0.1. I'm trying to select all the checkboxes when clicking a button. This code works in IE 6, but does NOT in Firefox 3. What am I doing wrong?
<input class="submit" type="button" value="check all" onclick="$(this.form).getInputs('checkbox').each(function (elem) {elem.checked = true;});" />
The form is the parent of the input, so this.form shouldn't make sense. Use an ID selector or parent.
Second thing - declare this js to assign action on document load, this way is a bit messy, separate js from html to have a clean flexible codebase.
In jQuery it'd be sth like:
$(document).ready(function(){
$.('#submitId').click(function(){
// check the checkboxes
});
}
in prototype should be similar.
I created a very basic page to test your issue:
<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.3.js" ></script>
</head>
<body>
<form>
<input type="checkbox" id="test1" /> Test 1<br/>
<input type="checkbox" id="test2" /> Test 2<br/>
<input type="checkbox" id="test3" /> Test 3<br/>
<input type="checkbox" id="test4" /> Test 4<br/>
<input class="submit" type="button" value="check all" onclick="$(this.form).getInputs('checkbox').each(function (elem) {elem.checked = true;});" />
</form>
</body>
</html>
& it works fine for me in Firefox 3.0.8 (as well as IE)...
I disagree with the other answers... this.form should be fine (gets the form object from the submit button, which should then let you get the checkboxes from it via getInputs).
What is the actual issue? Nothing happening at all? If so, the only thing i can think off is, are the checkboxes in the same form as the button?
EDIT: If your code is effectively the same as the above & its not working, the best I can suggest is that you turn your onclick into a propper function call & then use firebug to work out which specific bit isn't working. I.e. make your code look like this:
<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.3.js" ></script>
<script type="text/javascript" >
function checkAll(button) {
var form = $(button.form);
var inputs = form.getInputs('checkbox');
inputs.each(function (elem) {
elem.checked = true;
});
}
</script>
</head>
<body>
<form>
<input type="checkbox" /> Test 1<br/>
<input type="checkbox" /> Test 2<br/>
<input type="checkbox" /> Test 3<br/>
<input type="checkbox" /> Test 4<br/>
<input class="submit" type="button" value="check all" onclick="checkAll(this)" />
</form>
</body>
</html>
Then you can put break points in the function & make sure that 'button', 'form' and 'inputs' are what you expect them to be and that the 'elem' in the each loop is too.
You can see the solution in this link: http://www.ryboe.com/2008/07/10/select-all-checkboxes-with-prototype-js.html
If you don't wanna click, try this:
var form = $('options');
checkboxes = form.getInputs('checkbox');
checkboxes.each(function(e){ e.checked = 0 });