Check all checkboxes with jquery

问题

$(document).ready(function(){
    function set_checked {
        alert('test'); 
        $('*:checkbox').attr('checked', checked);
    }
});

And this html

<input onclick="set_checked()" value="Check all" type="button" />

Does not work for some reason. No alert box or nothing.

回答1:

You have a few problems,

missing parentheses in set_checked function definition
undefined variable checked
onclick references global function that isnt really global

With jQuery it is better to add the click event to an element with the jQuery click method. Here is how to correctly do this with jQuery.

$(document).ready(function(){
    // If you want to use the `set_checked` function elsewhere do this
    function set_checked() {
        $('*:checked').attr('checked', true);
    }
    $('#check_all').click(set_checked);

    // If you are only doing `set_checked` on the button press do this
    $('#check_all').click(function() {
        $('*:checked').attr('checked', true);
    });
});

<input id="check_all" value="Check all" type="button"/>

回答2:

$('*:checkbox').attr('checked', checked);

is presumably resolving as

$('*:checkbox').attr('checked', undefined);

You should have

$('*:checkbox').attr('checked', 'checked');

回答3:

try:

function set_checked() {
        alert('test'); 
        $('*:checkbox').attr('checked', 'checked');
    }

You forgot the ()

Edit: As it was said below checked must be a string.

回答4:

You're not creating the function properly. You need to add () between set_checked and {.

回答5:

Replace the entire example code:

  $(document).ready(function(){
    function set_checked {
        alert('test'); 
        $('*:checkbox').attr('checked', checked);
    }
 });

with:

function set_checked() {
    alert('test'); 
    $('*:checkbox').attr('checked', 'checked');
}

As others have mentioned, you need () on your function definition, and quotes around 'checked', but you also need the function defined in global scope, so not within a jquery onready handler.

回答6:

You defined the set_checked function inside function which means that it isn't in the global scope and cannot be accessed by the input click event.

回答7:

Make your javascript function:

function set_checked() {
    alert('test');
    $('input:checkbox').attr('checked', 'checked'); 
}

Your function was not defined correctly as it was missing the brackets on the name definition.

EDIT: was missing the quotes on the checked attribute as well. Also made the selector more explicit.

回答8:

Side note: there's no reason to place your functions inside $(document).ready();, that's for things that must be run at startup.

Update:

I'll throw in an example of you want to do it jQuery's style all-wide.

HTML:

<p><input id='test' type='submit' value='Click me' onclick='checkAll();' /></p>
<p>Let's see:</p>
<ul>
    <li><input type='checkbox'></li>
    <li><input type='checkbox'></li>
    <li><input type='checkbox'></li>
</ul>

JavaScript:

$(document).ready(function () {
    $('#test').click(function (event) {
        $('input[type="checkbox"]').attr('checked', 'checked');
    });
});

You can test it here.

来源：https://stackoverflow.com/questions/5107412/check-all-checkboxes-with-jquery

标签

jquery

html

function

input

checkbox