Click on the TR implementation to select the CheckBox function, click Checkobx to prevent bubbling event, jquery add checked attribute to checkbox or remove checked property cannot make CHECKOBX change state

Source: Internet
Author: User

Add a click event to TR, use the Find method to find all levels of elements under TR, children only the elements at the next level, so use Find.
The return value of find is a jquery object, and in this project it is not known why the use of jquery to add the checked attribute to a checkbox or to remove the checked property does not change the state of the CHECKOBX, so I convert the jquery object to a DOM object. How do you turn it? The jquery object [0] or get (0) is converted to a DOM object and then directly. Checked returns TRUE or FALSE to determine if the checkbox is selected. Then judge the state and change the state.

$ ("TR"). Click (function (e) {

var check = $ (this). Find ("input[type= ' checkbox ']");

if (check) {

var flag = check[0].checked;

if (flag) {

check[0].checked = false;

}else{

check[0].checked = true;

}

}

});

It's not over yet, and there's a problem when I click the checkbox. It is because the checkbox is clicked and the TR is clicked, so the status of the checkbox is just a flash and there is no change. To solve this problem, use the following code to implement. Add a block bubbling event to the checkbox, and three lines of code are done.

$ ("input[type= ' checkbox ']"). Click (function (e) {

E.stoppropagation ();

});

Solving jquery Adding checked attributes to a checkbox or removing the Checked property does not allow CHECKOBX to change state except to convert to Dom .

$ (". List-msg li"). Click (function () {
obj=$ (This). Find ("Input[type=checkbox]");
Alert (obj.is (": Checked"))
if (obj.is (": Checked")) {
Obj.prop ("Checked", false)
}else{
Obj.prop ("Checked", true)
}
})

jquery 1.6 or later sets the Boolean value of the property when you want to use Prop. And not attr.

Click on the TR implementation to select the CheckBox function, click Checkobx to prevent bubbling event, jquery add checked attribute to checkbox or remove checked property cannot make CHECKOBX change state

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.