jquery Operation CheckBox Firefox second failed to check the solution _jquery

Recently in the study of jquery (version jquery-1.9.1.js), the requirement to use jquery to achieve a full selection/selection, reverse, in IE (IE8) There is no problem, but in Firefox browser debugging when there are some small problems, not to achieve results.

The HTML code is as follows:

<div>
    your favorite sport is
    <input type= "checkbox" id= "Selectal1"/><label for= "Selectal1" > select All/select </ label><br/>

    <input name= "intrest" type= "checkbox"/> Soccer <input name= "intrest"
    CheckBox "/> Basketball
    <input name=" intrest "type=" checkbox "/> Badminton <input name=" intrest "type="
    checkbox " /> Table Tennis <br/>
    <button id= "allbtn" > select all </button>
    <button id= "notallbtn" > All do not choose </ button>
    <button id= "REVERSEBTN" > Anti-election </button>
    <button> submit </button>
  </ Div>

jquery Code:

<script type= "Text/javascript" src= "jquery-1.9.1.js" ></script> <script type= "Text/javascript" > $ (
        . Ready (function () {//Select all/all Uncheck Box $ ("#selectal1"). Click (function () {if ($ (this). attr ("checked") ==true) {
        $ ("input:checkbox[id!= ' Selectal1 ']"). each (function () {$ (this). attr ("Checked", true);
      });
        }else{$ ("input:checkbox[id!= ' Selectal1 ')"). each (function () {$ (this). attr ("checked", false);
      });
    }
    }); Select All button $ ("#allbtn"). Click (function () {$ ("input:checkbox[id!= ' Selectal1 ')"). each (function () {$ (this). att
      R ("Checked", true);
    });
    }); Select All button $ ("#notallbtn"). Click (function () {$ (' input:checkbox[id!= ' Selectal1 ']). each (function () {$ (this)
      . attr ("checked", false);
    });
    }); The reverse button $ ("#reversebtn"). Click (function () {$ ("input:checkbox[id!= ' Selectal1 ')"). each (function () {$ (this)
      . attr ("Checked",!$ (This). attr ("checked"));});
  });

 }) </script>

The check box binds the Click event, selects once, and then clicks Uncheck, and so on. This feature is not a problem in the IE8, but in Firefox test, the first two times are no problem, you can display the check and cancel, but when you go to select the CheckBox's property checkbox value to "checked", no problem, but check box does not show the selected state, Obviously the attribute value has changed, but does not show the check, I thought it is the browser cache problem, but the deletion of the cache is still not .... Later on the Internet to see the method, said the jquery version of the problem, jQuery1.6 above with attr will have compatibility problems, you have to replace Prop.

Check out the API Prop attribute is this:

Prop (NAME|PROPERTIES|KEY,VALUE|FN)

Overview

Gets the property value of the first element in the matching set of elements.
With some built-in properties of the DOM element or Window object, if you attempt to delete the property, the browser may produce an error. jquery allocates the properties of the undefined value for the first time, ignoring any errors generated by the browser.
The jquery API clearly shows that 1.6+ jquery uses prop, especially the checked properties of the checkbox, so the attr in the JS code is replaced by prop.

Code:

1.6+ jquery to use prop instead of attr will not achieve the effect!!!!
  //Select all/all Uncheck Box
  $ ("#selectal1"). Click (function () {
   if ($ (this). Prop ("checked") ==true) {
    $ ("Input: checkbox[id!= ' Selectal1 '). each (function () {
     $ (this). Prop ("checked", true);
    });
   else{
    $ ("input:checkbox[id!= ' Selectal1 ')"). each (function () {
     $ (this). Prop ("checked", false);
    });
  });
  Select All button
  $ ("#allbtn"). Click (function () {
   $ ("input:checkbox[id!= ' Selectal1 ')"). each (function () {
    $ ( This). Prop ("checked", true);
   });
  All Select button
  $ ("#notallbtn"). Click (function () {
   $ ("input:checkbox[id!= ' Selectal1 ')"). each (function () {
    $ (this). Prop ("checked", false);
   });
  The reverse button
  $ ("#reversebtn"). Click (function () {
   $ ("input:checkbox[id!= ' Selectal1 ')"). each (function () {
    $ (this). Prop ("Checked",!$ (This). Prop ("checked"));
  

Hope to help you.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.