开发者

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.


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"/>


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

is presumably resolving as

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

You should have

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


try:

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

You forgot the ()

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


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


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.


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.


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜