Jquery supports all functions, such as selection, invert selection, and deselection.

Source: Internet
Author: User

Jquery implements the functions such as full selection, reverse selection, and no selection. The following describes the examples directly.

Set the following check boxes and related buttons on the page (select all, select inverse, do not select all ):

<Input type = "checkbox" name = "fruit" value = "apple"/> apple <input type = "checkbox" name = "fruit" value = "orange"/> orange <input type = "checkbox" name = "fruit" value = "banana"/> banana <input type = "checkbox" name = "fruit" value = "grape"/> grape <input type = "button" id = "btn1" value = "select all"> <input type = "button" id = "btn2" value = "do not select all"> <input type = "button" id = "btn3" value = ""> <input type = "button" id = "btn4" value = ""> <input type =" button "id =" btn5 "value =" get all selected values ">

The complete code for implementing the relevant functions is as follows:

$ (Function () {$ ('# btn1 '). click (function () {// select all $ ("[name = 'fruit']"). attr ('checked', 'true') ;}); $ ('# btn2 '). click (function () {// do not select all $ ("[name = 'fruit']"). removeAttr ('checked') ;}; $ ('# btn3 '). click (function () {// invert $ ("[name = 'fruit']"). each (function () {if ($ (this ). attr ('checked') {$ (this ). removeAttr ('checked');} else {$ (this ). attr ('checked', 'true') ;}}); $ ("# btn4 "). click (function () {// select all odd numbers $ ("[name = 'fruit']: even "). attr ('checked', 'true');}) $ ("# btn5 "). click (function () {// obtain the values of all selected options var checkVal = ''; $ (" [name = 'fruit'] [checked] "). each (function () {checkVal + = $ (this ). val () + ',';}) alert (checkVal );})});

Before using jquery, you must introduce the jquery package!

Articles you may be interested in
  • Prohibit web page right-click, copy, save as, View Source file and other functions to implement web page source code protection
  • Javascript determines whether the mouse is left or right-click-compatible with ie, firefox, chrome, and other major browsers
  • FckEditor shortcut menu-image deletion function
  • Summary of the string truncation function implemented by javascript (including introduction to the use of Js to intercept Chinese characters)
  • Run the code preview code, save the code as, and copy the implementation of the code function.
  • Js shields mouse and keyboard events (including right-click, direction key, backspace key, F5 refresh key, etc.), compatible with IE and firefox
  • Using JavaScript to prohibit browsers from directly copying article content
  • Javascript checks whether the check box is selected

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.