Whether input checked is independent of attr or prop methods using jquery

Recently in the project has such a requirement, the user can choose the coupon when the order, but also can cancel the selection, and can select, Cancel.

This is a typical input tag checked feature, the blogger uses the radio element to implement this requirement, but the coupon can only be selected, cannot be unchecked, and multiple actions are always selected.

Online search, see a lot of posts, blog, the article describes the use of jquery prop method to replace the attr method can resolve the element multiple selection cancellation problem, but bloggers use this method does not solve the problem, and finally found that the click event caused by the problem.

The tag elements are as follows:

<inputclass= "J_usecouponselect"type= "Radio"name= "COUPON_SN"ID= "{$coupon. coupon_sn}"value= "{$coupon. coupon_sn}" Price= "{$coupon. Coupon_value}"><label for= "{$coupon. coupon_sn}"title= "{$coupon. Coupon_name}"></label>

The JS code is as follows:

$ (' #couponsltList label '). Click (function(){        varRadioid = $ ( This). attr (' for '); if(coupon_checked) {//When selected, uncheck$( This). Removeclass (' checked '); $(' # ' + radioid). Prop (' checked ',false); $(' #J_CouponShow '). HTML ('); Coupon_checked=false; }Else{            //when unchecked, select Coupons$ (' #couponsltList label '). Removeclass (' checked ') && $ ( This). addclass (' checked '); $(' #couponsltList input[type= "Radio"]). Prop (' checked ',false) && $ (' # ' + radioid). Prop (' checked ',true); $(' #J_CouponShow '). HTML ($ ( This). attr (' title '));//Backfill Selected Couponscoupon_checked =true; }    });

Bloggers Use the jquery version of 1.8.3, replacing the attr method with the prop method does not solve the problem, and the key is to use the global variable coupon_checked to mark the state of the INPUT element because the label label has a property for, When you click on the label, the radio element is also selected, the checkbox element is the same, and will not appear the first click to select, the second click Cancel, the third click and select the effect .

As in the JS code, although the prop method is used to change the checked attribute of the INPUT element, the default event of the document may be triggered by a click event, that is, click to select, so the state of the last INPUT element is always selected.

Bloggers try not to trigger input click events, found at this time using the Prop method and the Attr method in several jquery versions is not very different, using is (': checked ') can be used to determine the state of the element, check is true, do not select false, Only the return values of the attr and prop methods are different.

The tag elements are as follows:

 <  label  name  = "COUPON_SN"   ID  = "label"  >  point I </ label  >  <  input  class  = "J_usecouponselect"   type  = "checkbox"   name  = "COUPON_SN"   ID  = "COUPON_SN"   value  = "123"  />  

The JS code is as follows:

$ (' #label '). Click (function(){        varCID = $ ( This). attr (' name '); Click_num++;        Console.log (Click_num); Console.log (' attr: ' +$ ("#" +cid). attr (' checked '))); Console.log (' Prop: ' +$ ("#" +cid). Prop (' checked '))); Console.log (' Is:checked: ' +$ ("#" +cid). Is (': Checked '))); /*if ($ ("#" +cid). Prop (' checked ') {//selected, uncheck $ ("#" +cid). Prop (' checked ', false);        Console.log ($ ("#" +cid). Prop (' checked '));            }else{$ ("#" +cid). Prop (' checked ', true);        Console.log ($ ("#" +cid). Prop (' checked ')); }        */        if($ ("#" +cid). attr (' checked ')) ){            //When selected, uncheck$ ("#" +cid). attr (' checked ',false); Console.log ($ ("#" +cid). attr (' checked '))); }Else{            $("#" +cid). attr (' checked ',true); Console.log ($ ("#" +cid). attr (' checked '))); }    });

• jquery-1.11.1

When unchecked, attr () returns Undefined,prop () returns False,is (': Checked ') returns false; when checked, attr () returns Checked,prop (': True,is ') Returns True

Using the Attr method, the output is as follows:

Using the Prop method, the output is as follows:

• jquery-1.4.4

If no prop method is selected, attr () returns False,is (': Checked ') returns false; when checked, attr () returns True,is (': Checked ') returns True

Use the Attr method to output the following:

• jquery-1.8.3

The result is the same as 1.11.1

Use the Attr method to output the following:

Use the Prop method to output the following:

Whether input checked is independent of attr or prop methods using jquery