Questions about CheckBox selection and total no selection

Html:

<div class= "Outbox" >

<label for= "box" > select All </label>

<input type= "checkbox" id= "box"/>

</div>

<div class= "Outbox2" >

<label for= "Box1" > Options 1</label>

<input type= "checkbox" id= "Box1" name= "goods"/>

<label for= "Box2" > Options 2</label>

<input type= "checkbox" id= "Box2" name= "goods"/>

</div>

The first method:

$ ("#box)." Click (function () {

if ($ (this). Is (": checked)) {

$ ("input[name= ' goods ')"). attr ("Checked", "checked");

}else{

　　　　　　$ ("input[name= ' goods ')"). Removeattr ("Checked", "checked");

}

})

This thought that this method can complete the selection and the full selection of functions, but when the first click, the correct selection of all, and then click can be correct all do not select, but when you click again, you can not select all and not select, point of completely no effect. Can't find the reason why!

The second method:

　　$ ("#box)." Click (function () {

if (this.checked) {

$ ("input[name= ' goods ')"). each (function () {

This.checked=true;

})

}else{

　　　　　　$ ("input[name= ' goods ')"). each (function () {

This.checked=false;

})

}

})

　　This method can correctly realize the function of selecting all and not selecting. Why is that?

The third method:

1) $ ("#box)." Change (function () {

　　　　$ ("input[name= ' goods ')"). Prop ("Checked", this.checked);

　　})

2)$ ("#box)." Click (function () {

if ($ (this). Is (": Checked")) {

$ ("input[name= ' goods ')"). Prop ("checked", true);

}else{

　　　　　　$ ("input[name= ' goods ')"). Prop ("checked", false);

}

})

　　

　　Or, change the Boolean value in the prop to "checked" and false to "". It is also possible to fully select and select all functions.

question : Why prop can be directly assigned value, and attr such assignment is not?

When I started, the checkbox was unchecked, alert ($ ("#box"). attr ("checked") has been returning defined, but alert ($ ("#box"). Prop ("checked") The return is false; This is why pinch?

A netizen has also encountered a similar problem, Link: http://www.jb51.net/article/51136.htm

　　The reason is that in the jquery1.6 version, the Checked property is initialized when the page is initialized and does not change as the state changes. That is, if the checkbox is selected after the page has been loaded, the return is always checked, but if it is not selected at the beginning, the return is always undefined.

The prop () function is used to set or return the property value of the element that the current JQ object matches, which belongs to the JQ object. If you want to delete the attributes of a DOM element, use the Removeprop () function

The difference between prop () and attr (): Link: http://www.365mini.com/page/jquery-attr-vs-prop.htm

Questions about CheckBox selection and total no selection