jquery implementation gets the value of the selected check box

Source: Internet
Author: User
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. :)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.