Use JQuery to get the value of the selected checkbox

I checked it online, and I feel that some people's answers are really unclear, or the code is not simple enough. Or some want to force the ingredients and so on.

The following is the code to get the checked value of the input checkbox using JQuery:

<html>
    <head>
        <meta charset="gbk">
        <!-- 引入JQuery -->
        <script src="jquery-1.3.1.js" type="text/javascript"></script>
    </head>

    <body>
        <input type="checkbox" value="橘子" name="check">橘子1</input>
        <input type="checkbox" value="香蕉" name="check">香蕉1</input>
        <input type="checkbox" value="西瓜" name="check">西瓜1</input>
        <input type="checkbox" value="芒果" name="check">芒果1</input>
        <input type="checkbox" value="葡萄" name="check">葡萄1</input>
        
        <input type="button" value="方法1" id="b1">
        <input type="button" value="方法2" id="b2">


    </body>
    
    <script>
        //Method 1
        $("#b1").click(function(){
            //$('input:checkbox:checked') is equivalent to $('input[type=checkbox]:checked ')
            //means to select the selected checkbox
            $.each($('input:checkbox:checked'),function(){
                window.alert("You selected:"+
                    $('input[type=checkbox] :checked').length+", among them: "+$(this).val());
            });
        });
        
        //Method 2
        $("#b2").click(function(){
            $. each($('input:checkbox'),function(){
                if(this.checked){
                    window.alert("You selected: "+
                        $('input[type=checkbox]:checked').length+"个,其中有:"+$(this).val());
                }
            });
        });
    </script>
</html>

I checked it online, and I feel that some people's answers are really unclear, or the code is not simple enough. Or some want to force the ingredients and so on.

The following is the code to get the checked value of the input checkbox using JQuery:

<html>
    <head>
        <meta charset="gbk">
        <!-- 引入JQuery -->
        <script src="jquery-1.3.1.js" type="text/javascript"></script>
    </head>

    <body>
        <input type="checkbox" value="橘子" name="check">橘子1</input>
        <input type="checkbox" value="香蕉" name="check">香蕉1</input>
        <input type="checkbox" value="西瓜" name="check">西瓜1</input>
        <input type="checkbox" value="芒果" name="check">芒果1</input>
        <input type="checkbox" value="葡萄" name="check">葡萄1</input>
        
        <input type="button" value="方法1" id="b1">
        <input type="button" value="方法2" id="b2">


    </body>
    
    <script>
        //Method 1
        $("#b1").click(function(){
            //$('input:checkbox:checked') is equivalent to $('input[type=checkbox]:checked ')
            //means to select the selected checkbox
            $.each($('input:checkbox:checked'),function(){
                window.alert("You selected:"+
                    $('input[type=checkbox] :checked').length+", among them: "+$(this).val());
            });
        });
        
        //Method 2
        $("#b2").click(function(){
            $. each($('input:checkbox'),function(){
                if(this.checked){
                    window.alert("You selected: "+
                        $('input[type=checkbox]:checked').length+"个,其中有:"+$(this).val());
                }
            });
        });
    </script>
</html>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324709701&siteId=291194637