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 () {</p> <p>                //$("input[name='abc'][checked]").each(function () {<br>                //    alert(this.value);<br>                //});</p> <p>                $('#show').html("");<br>                $("input[name='abc'][checked]").each(function () {<br>                    //alert(this.value);<br>                    $('#show').append(this.value + "  ");<br>                });<br>            });</p> <p><br>            //获取选中项<br>            $('#huoqu2').click(function () {<br>                $('#show').html("");<br>                $("input[name='abc']:checked").each(function () {<br>                    //alert(this.value);<br>                    $('#show').append(this.value + "  ");<br>                });<br>            });</p> <p><br>            //全选/取消全选<br>            $('#quanxuan').toggle(function () {<br>                $("input[name='abc']").attr("checked", 'true');<br>            }, function () {<br>                $("input[name='abc']").removeAttr("checked");<br>            });</p> <p><br>            //反选<br>            $('#fanxuan').click(function () {<br>                $("input[name='abc']").each(function () {<br>                    if ($(this).attr("checked")) {<br>                        $(this).removeAttr("checked");<br>                    } else {<br>                        $(this).attr("checked", 'true');<br>                    }<br>                });<br>            });<br>        });</p> <p>  </script>


 

 

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

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.