Input---checked small problem

Must have a lot to do front-end classmates have encountered such a problem.

That's the checkbox. That's when we checked with the jquery setting and found that the checked property was set up.

But the selected style does not.

Let's do a simple test: look at the following three images

With the above three graphs we can see that we have two checkboxes the default is the first one selected.

We set the second setting to selected by clicking.

We then modify the selected state with the Attr property of jquery. We magically discovered that the selected state has changed, but the style has not changed.

$ ("#reply1"). attr ("Checked", true);

Some students may have to say that the above code is problematic. should be $ ("#reply1"). attr ("Checked", "checked");

However, we find that there is no egg to use .... So we're completely messy.

Here I tell you it's not our fault, it's the jquery question.

When using jquery to set a checkbox to select State, we typically use the

123

[JavaScript]View PlainCopy $<span style="Color:rgb (0,153,0)" > (</span><span style= "Color:rgb (0,0,102)" ><strong>this</strong></span ><span style= "Color:rgb (0,153,0)" >) </span>.<span style= "Color:rgb (102,0,102)" >attr</span><span style=" Color:rgb (51,102,204) "> "checked" </span><span style= "Color:rgb (51,153,51)" > , </span> <span style= "Color:rgb (0,51,102)" ><strong>true</strong></span><span style= "Color:rgb (0,153,0)" >) </span><span style= "Color:rgb (51,153,51)" >;</span>   <span style= "Color:rgb (0,102,0)" ><em>//or </ em></span>   $<span style= "Color:rgb (0,153,0)" > (</span><span  Style= "Color:rgb (0,0,102)" ><strong>this</strong>< /span><span style= "Color:rgb (0,153,0)" >) </span>.<span style=< Span class= "string" > "Color:rgb (102,0,102)" >attr</span><span style= "color: RGB (0,153,0) "> (</span><span style=" Color:rgb (51,102,204) "> "checked" </span><span style= "Color:rgb (51,153,51)" > , </span> checked<span style= "Color:rgb (0,153,0)" >) </span>< Span style= "Color:rgb (51,153,51)" >;</SPAN>&NBSP;&NBSP;

But when your jquery version is greater than 1.6, this only takes effect once, and you'll only see the Checked property of the checkbox increases checked but the reality is that there is no tick. In this case you will not be able to use the $ (this). attr ("Checked", checked) that way, you need to use the following code:

1

[JavaScript]View PlainCopy $<span style="Color:rgb (0,153,0)" > (</span><span style= "Color:rgb (0,0,102)" ><strong>this</strong></span ><span style= "Color:rgb (0,153,0)" >) </span>.<span style= "Color:rgb (102,0,102)" >prop</span><span style=" Color:rgb (51,102,204) "> "checked" </span><span style= "Color:rgb (51,153,51)" > , </span> <span style= "Color:rgb (0,51,102)" ><strong>true</strong></span><span style= "Color:rgb (0,153,0)" >) </span><span style= "Color:rgb (51,153,51)" >;</span>

Prop () is a new method of jquery1.6 or above, why does it have this method?

The difference between prop and attr

• Prop (PropertyName)--Gets the value of the property that matches the first element in the collection

It also has several other refactoring functions, as follows:

• Prop (PropertyName, value)
• Prop (map)
• Prop (PropertyName, function (index, oldpropertyvalue))

The above method is to set one or more properties for the matching element collection.

A description of the attributes module changes in jQuery1.6 and 1.6.1, as well as the preferred use of the. attr () method and the. Prop () method, as follows:

The change in the attributes module was to remove ambiguities between the attributes and properties, but it caused some confusion in the jquery community because one method was used in all versions prior to 1.6 (. attr ()) To deal with attributes and properties. But the old. attr () method has some bugs that are difficult to maintain. jQuery1.6.1 has updated the Attributes module and fixed several bugs.

elem.checked true (Boolean) the change of would with the checkbox state
$ (elem). Prop ("checked") True (Boolean) would change with checkbox state
Elem.getattribute ("Checked") "Checked" (String) Initial State of the checkbox; does not change
$ (elem). attr ("Checked") (1.6) "Checked" (String) Initial State of the checkbox; does not change
$ (elem). attr ("Checked") (1.6.1+) "Checked" (String) would change with checkbox state
$ (elem). attr ("Checked") (pre-1.6) True (Boolean) Changed with checkbox state

123

[JavaScript]View PlainCopy <span style= "Color:rgb (0,0,102)" ><strong> if</strong></span><span style= "Color:rgb ( 0,153,0) "> (</span>elem.<span style=" Color:rgb (102,0,102) ">checked< /span><span style= "Color:rgb (0,153,0)" >) </span>   <span style= "Color:rgb (0,0,102)" ><strong>if </strong></span><span style= "Color:rgb (0,153,0)" > (</span>$ <span style= "Color:rgb (0,153,0)" > (</span>elem<span style= "Color:rgb (0,153,0)" >) </span>.<span style=" Color:rgb (0,153,0) "> (</span ><span style= "Color:rgb (51,102,204)" > "checked" </ Span><span style= "Color:rgb (0,153,0)" >) </span><span style=< Span class= "string" > "Color:rgb (0,153,0)" >) </span>   <span style= "Color:rgb (0,0,102)" ><strong> if</strong></span><span style= "Color:rgb ( 0,153,0) "> (</span>$<span style=" Color:rgb (0,153,0) "> (</span> Elem<span style= "Color:rgb (0,153,0)" >) </span>.<span style= "Color:rgb (0,0,102)" ><strong>is</strong></span><span style= "Color:rgb (0,153,0)" > (</span><span style=" color: RGB (0,153,0) ">" </span><span style= "Color:rgb (0,153,0)" >) </span>

All three of the above are return Boolean values.
In order to make the change of the. attr () method in jQuery1.6 understood, here are some examples of using. attr (), although it works correctly in previous versions of jquery, but now you must use the. Prop () method instead:

attr ()	Prop ()
$ (window). attr.	$ (window). Prop.
$ (document). attr.	$ (document). Prop.
$ (": CheckBox"). attr ("Checked", true)	$ (": CheckBox"). Prop ("checked", true)
$ (": Option"). attr ("Checked", true)	$ (": Option"). Prop ("checked", true)

First, the use of the. attr () method in window or document does not work correctly in jQuery1.6 because the window and document cannot have attributes. They contain properties (for example, location or readystate) and must be manipulated using the. Prop () method or simply using JavaScript native methods. In jQuery1.6.1, window and document use. attr () will be automatically turned into use. Prop instead of throwing an error.

Second, checked,selected and the other Boolean attributes mentioned earlier are treated specially because of the special relationship between these attributes and their corresponding properties. Basically, a attribute is what you see in the following HTML:

1	[HTML] view plain copy <input type="checkbox" checked="checked">

A Boolean attributes, such as: checked, is only set to the default or initial value. In the element of a checkbox, checked attributes is set when the page loads, regardless of whether the checkbox element is selected.

The properties are what the browser uses to record the current value. Under normal circumstances, the properties reflect their corresponding attributes (if present). But this is not the case with a Boolean attriubutes. The Boolean properties remain up-to-date when the user taps a checkbox element or selects an option for a SELECT element. But the corresponding Boolean attributes are not the same, as described above, they are only used by the browser to save the initial value.

1234

[JavaScript]View PlainCopy $<span style="Color:rgb (0,153,0)" > (</span><span style= "Color:rgb (51,102,204)" > "Color:rgb (0,153,0)" >) </span>.<span style= " Color:rgb (102,0,102) ">get</span><span style=" Color:rgb (0,153,0) "> ( </span><span style= "Color:rgb (204,0,0)" >0</span><span  Style= "Color:rgb (0,153,0)" >) </span>.<span style= " Color:rgb (102,0,102) ">checked</span> <span style=" Color:rgb ( 51,153,51) ">=</span> <span style=" Color:rgb (0,51,102) ">< Strong>true</strong></span><span style= <span style="Color:rgb (0,102,0)" ><em>//is the same as $ (": Checkbox:first"). Prop ("checked", true)  ; </em></span> In jQuery1.6, if you set checked using the following method: $<span style="Color:rgb (0,153,0)" > (</span><span style="Color:rgb (51,102,204)" >": CheckBox" </span><span style="Color:rgb (0,153,0)" >) </ Span>.<span style="Color:rgb (102,0,102)" >attr</span><span style="Color:rgb (0,153,0)" > (</span><span style="Color:rgb (51,102,204)" >"Checked" </span><span style=" Color:rgb (51,153,51) ">,</span> <span style=" Color:rgb (0,51,102) "><strong>true</ Strong></span><span style="Color:rgb (0,153,0)" >) </span><span style="Color:rgb ( 51,153,51) ">;</span>

The above code will not check the checkbox element because it is the property that needs to be set, but all of your settings are the initial values.

However, when jQuery1.6 was released, the jquery team understood that setting some values was not particularly useful when the browser was only concerned with page loading. So, to keep backwards compatibility and the usefulness of the. attr () method, we can continue to use the. attr () method in jQuery1.6.1 to get and set these Boolean attributes.

The most common attributes are checked,selected,disabled and ReadOnly, but the following is the use of jQuery1.6.1 support. attr () dynamically acquire and set the Boolean attributes/ Complete list of properties: Autofocus, AutoPlay, async, checked, controls, defer, disabled, hidden, loop, multiple, open, ReadOnly, re Quired, scoped, selected.

It is also recommended that you use the. Prop () method to set these Boolean attributes/properties, even if these use cases are not converted to use the. Prop () method, but your code can still run correctly in jQuery1.6.1.

Here are a list of some of the attributes and properties, which should normally be used with their corresponding methods (see the list below) to get and set them. The following is the first usage, but the. attr () method can run in all attributes cases.

Note: The properties of some DOM elements are also listed below, but only run in the new. Prop () method

. attr () and. Prop () should not be used to value/set values. Use the. Val () method instead (even if you use. attr ("value", "somevalue") to continue running, as you did before 1.6)

Overview of preferred usage

The prop () method should be used to handle Boolean attributes/properties and properties that do not exist in HTML (for example, window.location). All other attributes (those you see in HTML) can and should continue to be manipulated using the. attr () method.

Input---checked small problem