Home > Article > Web Front-end > How to achieve full selection effect with jquery

How to achieve full selection effect with jquery

藏色散人Original: 2021-11-12 10:26:275112browse

Jquery method to achieve the all-select effect: 1. Create an HTML sample file; 2. Determine the current all-select box through the "$('input').click(function(){...}" method Just select it or not.

The operating environment of this article: windows7 system, jquery3.2.1 version, DELL G3 computer

How to implement jquery Select all effect? 

jQuery achieves all selection effect

This is a piece of code that uses jquery to achieve all selection. The main idea is as follows:

1. All check boxes have click events, and all effects are implemented under the click event

2. The functions implemented by the all-selected check box are the same as those implemented by other check options Different, all make a judgment in the click event, whether it is a click event of the all-selected check box

3. If so, execute the judgment whether the all-selected check box is selected, if the current state is selected , then click to uncheck, and uncheck all options at the same time. If Select All is currently unchecked, click to check, and check all

4. If not, it means that the clicked object is out of all If you want to select other options, then you need to judge whether the number of currently checked options is equal to the number of all options except the Select All check box. If they are equal, it means that all the options are checked, and the Select All check box will be selected at the same time. The box is also checked, otherwise it is not checked.

The following is my code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>全选效果</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(&#39;input&#39;).click(function(){
                    if($(this).index() == 0){
                        //判断当前全选框是否选中，如果选中则全选，否则全不选
                        if($(&#39;input&#39;).eq(0).prop(&#39;checked&#39;)){
                            $(this).nextAll().prop(&#39;checked&#39;,true);
                        }else{
                            $(this).nextAll().prop(&#39;checked&#39;,false);
                        }
                    }else{
                        //判断除了全选之外的选项是否全部选中，选中则勾上全选，否则全不选
                        if($(&#39;input:gt(0):checked&#39;).length == $(&#39;input&#39;).length-1){
                            $(&#39;input&#39;).eq(0).prop(&#39;checked&#39;,true)
                        }else{
                            $(&#39;input&#39;).eq(0).prop(&#39;checked&#39;,false)
                        }
                    }  
                })
            })
        </script>
    </head>
    <body>
        <input type="checkbox" />全选
        <input type="checkbox" />语文
        <input type="checkbox" />数学
        <input type="checkbox" />英语
    </body>
</html>

There are many ideas to achieve the all-select effect. This idea is relatively different from The idea of separating two click events is a little difficult to understand, but in fact the code to achieve the effect is the same.

Recommended learning: "jquery video tutorial"

The above is the detailed content of How to achieve full selection effect with jquery. For more information, please follow other related articles on the PHP Chinese website!

jquery html function 对象事件 input

Statement：

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

Previous article：A brief discussion on how NVM installs and manages multiple Node versionsNext article：A brief discussion on how NVM installs and manages multiple Node versions

See more

How to achieve full selection effect with jquery

Related articles