jQuery_jquery에서 체크박스 선택 항목 가져오기 등의 작업 및 주의사항

1. 체크박스의 선택된 항목 가져오기
2. 모두 선택하고 체크박스 옵션 선택 취소

테스트용 체크박스 코드 스니펫:

코드 복사 코드는 다음과 같습니다.

                                      id="in1"checked="checked" />& lt;라벨 for="in1">1학년
    2학년
    3학년 grade
     4학년> ;
    5학년
label for="in6">6학년
                                                                                 > >             

1: 먼저 체크박스의 선택된 항목을 가져오는 첫 번째 요점에 대해 이야기해 보겠습니다. 인터넷에 있는 대부분의 방법은 각각을 사용하여 다음을 얻습니다.

코드 복사 코드는 다음과 같습니다.

$("input[name='checkbox '][ selected]").each(function () {

Alert(this.value);
})


그런데 테스트할 때 문제가 발생했습니다. 이 방법은 다음에서 작동합니다. IE Firefox 및 Chrome 브라우저에서는 얻을 수 있지만 현재 선택된 항목은 Firefox 및 Chrome 브라우저에서 얻을 수 없습니다. 테스트 결과는 다음과 같습니다.

IE에서의 테스트 결과(제 것은 IE10입니다)

IE10에서의 효과:

Chrome 브라우저에서의 효과:

Google에서 검색하여 이유를 찾았습니다.

웹사이트:

얼마나 많은 입력 CheckBox가 선택되었는지에 대한 Jquery 질문, IE는 정상이고 FF이며 Chrome에서 값을 가져올 수 없습니다

제가 사용하는 jquery 버전은 1.7.2이므로 :checked를 사용해야 수정된 코드를 얻을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//선택한 항목 가져오기

huoqu2').click(함수 () {
                                                                                       ~ ;

크롬에서의 효과:

둘: 확인란을 모두 선택하고 선택 작업을 반대로 수행합니다.

이 두 가지는 상대적으로 간단하므로 코드로 바로 이동하겠습니다.

코드 복사 코드는 다음과 같습니다.

//모두 선택/모두 선택 취소
>                                                               
              $("input[name='abc']").removeAttr("checked");
         });

                                                                                                ~ ~ >                                                      

다시 요약하자면:

jquery 버전이 1.3 이전인 경우 체크박스의 선택된 항목을 가져오는 작업:





코드 복사


코드는 다음과 같습니다.

     $("input[name='abc '][ 선택됨]").each(함수 () {

                                                                                       |

jquery 버전이 1.3 이후인 경우 체크박스의 선택된 항목을 가져오는 작업:

코드 복사 코드는 다음과 같습니다.

확인됨").each(함수() {
                                                                                                           ~                                           ;
전체 테스트 데모 코드가 첨부되어 있습니다:

코드 복사 코드는 다음과 같습니다.

   
   
   

    <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');
                    }
                });
            });
        });

 

 

 

              1학년 🎜>                                   2학년
3학년
   4학년
    5학년
    6학년
                                                                              " value="7학년" id="in7" />7학년
    ; 입력 유형 ="button "id ="huoqu "value ="선택된 항목 받기 (ff and chrome에서 유효하지 않음) " /& gt;
/모든 선택을 취소하십시오" / >
                                                                                                    ~                                           '선택한 항목 가져오기'                                       ~
                                                                                                  아동