Jquery operations on forms 2

Cascade Effect of checkbox
Copy codeThe Code is as follows:
<Form>
What kind of sports do you like? <Br/>
<Input type = "checkbox" id = "CheckedAll"/> select all or not <br/>
<Input type = "checkbox" name = "items" value = ""/> football
<Input type = "checkbox" name = "items" value = "basketball"/> basketball
<Input type = "checkbox" name = "items" value = "badminton"/> Badminton
<Input type = "checkbox" name = "items" value = ""/> Ballon
<Input type = "button" id = "send" value = "Submit"/>
$ ('# Checkedall'). click (function (){
$ ('[Name = items]: checkbox'). attr ("checked", this. checked );
})

When you click the check box whose id is "CheckedAll", the check box group is selected. When you deselect an option in the check box group, the check box with id "CheckedAll" is not deselected.
To solve this problem:
Copy codeThe Code is as follows:
$ ('[Name = items]: checkbox'). click (
Function (){
Var flag = true;
$ ('[Name = items]: checkbox'). each (function (){
If (! This. checked)
Flag = false;
});
$ ('# Checkedall'). attr ('checked', flag );
})
// Or the total number of check boxes that can be used is equal to the number of check boxes selected
$ ('[Name = items]: checkbox'). click (
Function (){
Var $ tmp = $ ('[name = items]: checkbox ');
// Use the filter method to filter out the check box and assign a value to CheckedAll.
$ ('# Checkedall'). attr ('checked', $ tmp. length = $ tmp. filter (': checked'). length );
})

Applications in the drop-down list
Copy codeThe Code is as follows:
<Div class = "content">
<Select multiple id = "select1" style = "width: 100px; height: 100px;">
<Option value = "1"> option 1 </option>
<Option value = "2"> option 2 </option>
<Option value = "3"> option 3 </option>
<Option value = "4"> option 4 </option>
<Option value = "5"> option 5 </option>
<Option value = "6"> option 6 </option>
<Option value = "7"> option 7 </option>
</Select>
<Div>
<Span id = "add"> add to right </span>
<Span id = "add_all"> Add all to the right </span>
</Div>
</Div>
<Div class = "content">
<Select multiple id = "select2" style = "width: 100px; height: 100px;">
</Select>
<Div>
<Span id = "add"> add to left </span>
<Span id = "add_all"> Add all to the left </span>
</Div>
<Div>
// Add the selected option to the peer
$ ('# Add'). click (function (){
Var $ options = $ ('# select1 option: selected'); // obtain the selected option
$ Options. appendTo ('# select2'); // append it to the other party
});
// Add all options to the other party
$ ('# Add'). click (function (){
Var $ options = $ ('# select1 option'); // obtain the selected option
$ Options. appendTo ('# select2'); // append it to the other party
});
// Double-click an option to add it to the peer.
$ ('# Select1'). dblclick (function (){
Var $ options = $ ('option: selected', this); // obtain the selected option
$ Options. appendTo ('# select2'); // append it to the other party
})

PS: $ ('option: selected', this), $ () has two parameters: a selector and a scope. Equivalent to $ ('# select1 option: selected ')