Solve the problem that the attr (checked) of checkbox is always undefined.

Source: Internet
Author: User

In response to the development requirements of the project, this diaosi needs to make a fully-selected checkbox function.

Oh, huh ~~ Isn't that easy? A total checkbox, N multiple sub-checkboxes. Once the total checkbox is selected, all the sub-checkboxes are selected. Once the total is not selected, all the sub-boxes are not selected.

With this small demand, I have a bit of happiness. What a simple function is this? OK, it will take two minutes to complete ~~~

In the past 1 minute 1 second, the number of horses in the inner grassland of Ben diaosi has gradually increased to tens of millions ~~~

What is Nima?
Alert ($ ("# checkbox_all"). attr ("checked "));
Always undefined?


Nana ???

Why ?? Are you stupid about browsers? Then we decided to change the browser for testing, from chrome to IE, from IE to Firefox. -_-|

Is jquery improving again ????

After checking the silk with the harbo telescope and the high definition laser electron microscope, we finally found the clue ....

In jquery1.6, this was changed:

[The checked attribute has been initialized during page initialization and will not change as the status changes.

That is to say, if the checkbox is selected after loading the page, the returned result will always be checked (I did not select it at the beginning)

If not selected at the beginning, the returned result will always be undefined !]


Since jquery has modified this, there must be a better solution:

. Prop () is a powerful tool to solve this problem!

The usage is as follows:

Alert ($ ("# checkbox_all"). prop ("checked "));
This will change to true or false ~~


As a result, the code of this diaosi is changed to the following:

# Check_all is the total checkbox selected for all; # check_children is the subcheckbox
Copy codeThe Code is as follows:
$ ("# Check_all"). change (function (){
$ ('. Check_children'). prop ("checked", this. checked );
});

Or:
Copy codeThe Code is as follows:
$ ("# Check_all"). change (function (){
Var is_checked = $ (this). prop ("checked ");
$ ('. Check_children'). prop ("checked", is_checked );
});

However, I still like the first method. The less code, the better ~~ Write less, do more!

It is very convenient to solve the problem of Selecting All ~~~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.