Application Scenarios:
We should often see the list appearing in the system, and there will be an operation on the list data (such as Delete,
Modify, view, etc.). We can add a Delete button after each list item to put the list item's
Related parameters (such as ID) post to the background for deletion. Of course, if you just delete one or two numbers at a time,
There's nothing wrong with doing this, but if you need to remove 100 at a time, you go to a
Deletion of the bar. Will it be better to delete 10 articles each time?
Okay, next. We'll use jquery to solve this problem.
First, let's say we need to delete 5 list items. HTML inside the list label is UL and OL, where UL is unordered, and OL is ordered. Each list item uses LI.
<ul id= "Fruit" >
<li><input type= "checkbox" value= "0001"/> Apple </li>
<li>< Input type= "checkbox" value= "0002"/> Pear </li>
<li><input type= "checkbox" value= "0003"/> Mango </li>
<li><input type= "checkbox" value= "0004"/> Hawthorn </li>
<li><input type= " CheckBox "value=" 0005 "/> Banana </li>
</ul>
Suppose we just pass the fruit's ID to the background to delete all the fruit. Then pass an array as [0001,0002,0003,0004,0005] to the background. So, we need to get the value of the input tag in 5 li elements.
Obviously, your idea might be to use a jquery filter to get an array of input objects under Li, iterate through the array, judge each input object, and then determine if the input object is selected, and the Val () function to get its value. Then put the value into an array to store the ID in arr.
"Key" selector, traversal, array.
1. Get the selected Array object
The jquery selector ': CheckBox ' is the Find all check box.
$ ("#fruit: checkbox");
2. Iterate over this object array
Each function of the Jqeury: a function that runs for each matching element. Each function:
Syntax:
$ (selector). each (function (index,element))
Parameters |
Description |
function (index,element) |
Necessary. A function that runs for each matching element. Index-the index position of the selector element-current elements (you can also use the "this" selector) |
After iterating, determine if the check box is selected.
The prop function of jquery (prop function is on the jQuery1.6 version): prop (NAME|PROPERTIES|KEY,VALUE|FN)
Gets the property value of the first element in the matching element set. With some built-in properties for DOM elements or window objects, the browser may produce an error if the property is attempted to be deleted. jquery first assigns a property of the undefined value, ignoring any errors generated by the browser
Parameters |
type |
version |
Name (property name) |
String |
V1.6 |
Properties (as the name/value pairs object of the property) |
Map (String, Object) |
V1.6 |
Key,function (Index, attr) (property name, property value) |
String, Function |
V1.6 |
[Note the function of the property value returned in]key,function (INDEX,ATTR), the first parameter is the current
The index value of the element, and the second parameter is the original property value.
Example:
1. Description of the parameter name:
Select the check box to true, not checked for false
check:
$ ("input[type= ' checkbox ')"). Prop ("checked", true);
Unchecked:
$ ("input[type= ' checkbox ']"). Prop ("checked", false);
2. Parameter perporties Description:
Disables all check boxes on the page.
$ ("input[type= ' checkbox ']"). Prop ({disabled:true});
3. Parameter key, callback function Description:
Use the function to set the check box on all pages to reverse the selection.
$ ("input[type= ' checkbox ']"). Prop ("Checked", Fucntion (I, Val) {
return!val;
});
3. Arrays
This is the simplest. jquery defines an array.
var arr = new Array ();
So the final code:
<! DOCTYPE html>
At this point, jquery implements the check box value, is not very simple.
If this article is wrong, please correct me. QQ1448768191. :)