Home Web Front-end JS Tutorial jQuery menu select all, invert selection, cancel instance analysis

jQuery menu select all, invert selection, cancel instance analysis

Dec 29, 2017 pm 01:36 PM
jquery Counter-election Cancel

Regarding the functions of selecting all, inverting selection, and canceling in jQuery menu, the functions of selecting all, inverting selection, and canceling are very common. In this article, the editor will bring you an example of jQuery menu (selecting all, inverting selection, canceling). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

No more nonsense, let’s go directly to the code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="全选" onclick="checkAll()">
  <input type="button" value="反选" onclick="reverseAll()">
  <input type="button" value="取消" onclick="cancleAll()">
  <table border="1">
    <thead>
      <tr>
        <th>选择</th>
        <th>IP</th>
        <th>端口</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>1.1.1.1</td>
        <td>80</td>
      </tr>
    </tbody>

  </table>
  <script type="text/javascript" src=&#39;jquery-3.2.1.js&#39;></script>
  <script type="text/javascript">
    function checkAll(){
      $(':checkbox').prop('checked',true);
    }
    function cancleAll() {
      $(':checkbox').prop('checked',false);
    }
    function reverseAll(){
      $(':checkbox').each(function(){
        var v = $(this).prop('checked')? false:true;  /*三元运算: var v = 条件? 真值:假值*/
        $(this).prop('checked',v)
      })
    }
  </script>
</body>
</html>
Copy after login

Related recommendations:

About the solution to the compatibility issue between Chrome and jQuery menu

Use jquery menu plug-in HoverTree to imitate Jingdong unlimited menu_jquery

##jQuery menu plug-in usage example_jquery

The above is the detailed content of jQuery menu select all, invert selection, cancel instance analysis. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1653
14
PHP Tutorial
1251
29
C# Tutorial
1224
24
How to cancel an order with Meituan How to cancel an order with Meituan Mar 07, 2024 pm 05:58 PM

When placing orders using Meituan, users can choose to cancel the orders they do not want. Many users do not know how to cancel Meituan orders. Users can click on the My page to enter the order to be received, select the order that needs to be canceled and click Cancel. How to cancel an order with Meituan 1. First, click on Meituan My Page to enter the order to be received. 2. Then click to enter the order that needs to be canceled. 3. Click Cancel Order. 4. Click OK to cancel the order. 5. Finally, select the reason for cancellation according to your personal situation and click Submit.

How to implement reverse selection in word How to implement reverse selection in word Mar 19, 2024 pm 07:58 PM

We often hear the operation of inverting selection in many graphic editing software. Can we achieve inverse selection in word documents? In fact, the functions of the Word office software are relatively powerful. Even if there is no direct inverse selection tool that can reverse the selection of content with one click, we can also use alternative methods to complete the reverse selection in Word. If you encounter the operation requirement of reverse selection in Word at work, Come here quickly to see how to reverse the selection in word. 1. First, we create and open a word document, and we need to enter some text content. 2. We select part of the text and set its font color to red, as shown in the figure below: 3. Below, we find [Search] on the toolbar, pull down and click the [Advanced Search] option, and then search and replace

Detailed steps to cancel the ear symbol on WeChat Detailed steps to cancel the ear symbol on WeChat Mar 25, 2024 pm 05:01 PM

1. The ear symbol is the voice receiver mode. First, we open WeChat. 2. Click me in the lower right corner. 3. Click Settings. 4. Find the chat and click to enter. 5. Uncheck Use earpiece to play voice.

Where to cancel Mango TV automatic renewal? Where to cancel Mango TV automatic renewal? Feb 28, 2024 pm 10:16 PM

When many users experience Mango TV, a video software, they choose to become members in order to enjoy more film and television resources and more comprehensive services. In the process of using Mango TV membership services, some users will choose to turn on the automatic renewal function to enjoy the discounts to ensure that they will not miss any exciting content. However, when users no longer need membership services or want to change the payment method, canceling the automatic renewal function is a very important thing to protect the safety of property. How to cancel the automatic renewal service of Mango TV? Users who want to know Come and follow this article to learn more! How to cancel the automatic renewal of membership on Mango TV? 1. First enter [My] in the Mango TV mobile APP, and then select [VIP Membership]. 2. Then find [Tube

Operation steps for canceling subscription payment on WeChat Operation steps for canceling subscription payment on WeChat Mar 26, 2024 pm 08:21 PM

1. Click the [iTunesStore and AppStore] option in the phone settings. 2. Click [View AppleID], and then enter the login password. 3. Enter the [Account Settings] interface and click [Payment Information]. 4. Check the payment method as [None] and click [Finish]. After completion, return to the WeChat interface. At this time, you will receive the [Successful Cancellation Notification] message, and WeChat will no longer automatically deduct fees.

How to cancel facial recognition payment on Alipay? Alipay tutorial on canceling facial recognition payment How to cancel facial recognition payment on Alipay? Alipay tutorial on canceling facial recognition payment Mar 16, 2024 pm 03:07 PM

Alipay is a very practical life service platform. This software is very powerful. It provides users with functions such as life payment, travel, medical insurance, etc., bringing convenience to everyone's life. The Alipay platform has many functions waiting for everyone to unlock, so how do you cancel face-swiping payment on Alipay? Detailed tutorial on canceling face-swiping payment on Alipay: 1. First open Alipay 2. Click on My in the lower right corner 3. Click on Settings in the upper right corner 4. Click on payment settings 5. Click on biometric payment 6. Find the mobile phone to scan the face to pay 7. Uncheck the software features 1. Support various scene relationships, group chat and group payment are more convenient; 2. Establish family accounts for children and parents; 3. Free long-distance inter-bank transfers and credit card repayments

How to cancel delivery within 48 hours on Doudian? Can I appeal if the delivery is overdue? How to cancel delivery within 48 hours on Doudian? Can I appeal if the delivery is overdue? Mar 07, 2024 pm 01:20 PM

As a well-known short video e-commerce platform in China, Doudian provides merchants with convenient sales channels and a broad user base. On Doudian, merchants need to deliver goods in time to meet users' shopping needs, but sometimes due to various reasons, merchants may need to cancel shipments within 48 hours. So, how does Doudian cancel shipments within 48 hours? 1. How to cancel delivery within 48 hours on Doudian? Merchants can cancel shipments in Doudian's backend management system. After logging in to the backend management system, merchants can easily find the orders that need to be canceled and select the corresponding orders for operation. By clicking the Cancel Shipping button, the system will pop up a prompt to confirm the cancellation. After the merchant confirms, the order can be successfully canceled. This operation applies to orders shipped within 48 hours

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

See all articles