<SCRIPT type = "text/JavaScript">
$ (Function (){
// Select all
$ ("# Checkedall"). Click (function (){
// All the checkboxes follow the all selected checkboxes.
$ ('[Name = items]: checkbox'). ATTR ("checked", this. Checked );
});
$ ('[Name = items]: checkbox'). Click (function (){
// Define a temporary variable to avoid repeated use of the same selector to select elements on the page, improving program efficiency.
VaR $ TMP = $ ('[name = items]: checkbox ');
// Use the filter method to filter out the selected check boxes. And assign a value to checkedall.
$ ('# Checkedall'). ATTR ('checked', $ TMP. Length = $ TMP. Filter (': checked'). Length );
/*
// Write more comments for a row that does too many tasks. Complex selectors may also affect efficiency. Therefore, the following statement is not recommended.
$ ('# Checkedall'). ATTR ('checked ',! $ ('[Name = items]: checkbox'). Filter (': Not (: checked) '). Length );
*/
});
// Output value
$ ("# Send"). Click (function (){
VaR STR = "you selected: \ r \ n ";
$ ('[Name = items]: checkbox: checked'). Each (function (){
STR + = $ (this). Val () + "\ r \ n ";
})
Alert (STR );
});
});
</SCRIPT>
<Form method = "Post" Action = "">
What kind of sports do you like? <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 = ""/> Table Tennis <br/>
<Input type = "button" id = "send" value = "Submit"/>
</Form>
Select All check boxes