Operations and precautions such as obtaining checkbox selected items in jQuery_jquery

1. Get the selected items of the checkbox
2. Select all and unselect the checkbox options

Checkbox code snippet for testing:

Copy code The code is as follows:

                                                id="in1" checked="checked" />First grade
    Second grade
    Third grade
     Fourth grade
    Fifth grade
                                                                                                                                        label for="in6">Sixth grade
                                                                                                                                       "in7">Seventh grade
                                                                                                                           >Eighth grade
                                                 

1: First of all, let’s talk about the first point, getting the selected item of the checkbox. Most of the methods found on the Internet use each to obtain:

Copy code The code is as follows:

$("input[name='checkbox'][ checked]").each(function () {
alert(this.value);
})

But I encountered a problem when testing. This method works in IE It can be obtained under Firefox and Chrome browsers, but the current selected item cannot be obtained under Firefox and Chrome browsers. The test results are as follows:

Test results under IE (mine is IE10):

The effect under IE10:

The effect under Chrome browser:

I found the reason by searching on google:

Website: Jquery question about how many input CheckBoxes are selected, IE is normal, FF and Chrome cannot get the value

Because the jquery version I am using is 1.7.2, I have to use :checked to obtain it. The modified code:

Copy code The code is as follows:

//Get the selected item
huoqu2').click(function () {
                                                                                                                                    ) {
                                                                                   });

The effect under chrome:

Two: Select all checkboxes and reverse selection operation:

Since these two are relatively simple, I will go directly to the code:

Copy code The code is as follows:

//Select all/Deselect all
                        ('#quanxuan').toggle(function () {
                                                                                                                                         
               $("input[name='abc']").removeAttr("checked");
         });

                                                                                                                                                                                                                                                              . 🎜>                                                                                                                                      $(this).attr("checked ", 'true');
                                                                                                                
To summarize again:

When the jquery version is before 1.3, the operation to obtain the selected item of the checkbox:





Copy code

The code is as follows:

     $("input[name='abc'][ checked]").each(function () {

                                                                                                                                                                                                             ;

When the jquery version is after 1.3, the operation to obtain the selected item of the checkbox:

Copy code

The code is as follows:


checked").each(function () {
                                                                                                                                                                                                                                                                                         ;

Attached is the complete test Demo code:

Copy code The code is as follows:

   
   
   

    <script><BR> $(function () {<BR> //获取选中项(FF和chrome下无效)<BR> $('#huoqu').click(function () {</script>

                //$("input[name='abc'][checked]").each(function () {
                //    alert(this.value);
                //});

                $('#show').html("");
                $("input[name='abc'][checked]").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

            //获取选中项
            $('#huoqu2').click(function () {
                $('#show').html("");
                $("input[name='abc']:checked").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

            //全选/取消全选
            $('#quanxuan').toggle(function () {
                $("input[name='abc']").attr("checked", 'true');
            }, function () {
                $("input[name='abc']").removeAttr("checked");
            });

            //反选
            $('#fanxuan').click(function () {
                $("input[name='abc']").each(function () {
                    if ($(this).attr("checked")) {
                        $(this).removeAttr("checked");
                    } else {
                        $(this).attr("checked", 'true');
                    }
                });
            });
        });

 

 

 

              First Grade
                                     Second grade
Third grade
   Fourth Grade
    Fifth grade
    Sixth Grade
                                                                                                          " value="seventh grade" id="in7" />seventh grade
    Eighth grade
                                                             ;input type="button" id="huoqu" value="Get selected items (invalid in FF and chrome)" />
                                                                                                                  /Cancel all selections" />
                                                                                                                                                                                                                                                                                        ​"Get the selected item" />
                                                                                                                                                                                    
                                                                                                         Child