javascript - Prototype select all checkboxes code works in IE, but not Firefox - Stack Overflow

admin2025-04-17 0

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;});" />

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;});" />

Share Improve this question edited Dec 29, 2011 at 16:57 Rob W 349k87 gold badges807 silver badges682 bronze badges asked Apr 13, 2009 at 20:36 Robert4Real 1,4126 gold badges23 silver badges39 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

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.

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.

You can see the solution in this link: http://www.ryboe./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 });

What is you replace

$(this.form)

with

$('MYFORMNAME')

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744846105a270267.html

javascriptPrototype select all checkboxes code works in IE

but not FirefoxStack Overflow

最新回复(0)