[JQUERY] jQuery를 체크 박스 상태 변경 이벤트를 확인

jQuery를 체크 박스 상태 변경 이벤트를 확인

해결법

1. ---

   1.대신 클릭의 변경 이벤트에 바인딩. 그러나, 당신은 아마 아직도 확인란이 선택되어 있는지 여부를 확인해야합니다 :

   대신 클릭의 변경 이벤트에 바인딩. 그러나, 당신은 아마 아직도 확인란이 선택되어 있는지 여부를 확인해야합니다 :

   $(".checkbox").change(function() {
       if(this.checked) {
           //Do stuff
       }
   });
   

   클릭 이벤트를 통해 변경 이벤트에 바인딩의 주요 장점은 체크 박스에 모든 클릭이 상태 변경을 일으킬 것입니다. 당신은 단지 변화 상태에있는 확인란을 일으킬 캡처 이벤트를 원하는 경우 적절 명 변경 이벤트를합니다. 의견 편집 됨

   내가 사용했던 것을 또한 노트는 직접 DOM 요소의 속성에 액세스 짧고 빠르다 간단하기 때문에, 대신에 jQuery를 방법을 JQuery와 객체의 요소를 포장하고 사용하는 this.checked.

   편집 (주석 참조)

   모든 체크 박스를 얻으려면 몇 가지 옵션이있다. 체크 박스의 의사 선택 : 사용자가 사용할 수 있습니다 :

   $(":checkbox")
   

   또는 당신은 속성 같음 선택기를 사용할 수 있습니다 :

   $("input[type='checkbox']")
   

2. ---

   2.동적으로 체크 박스를 추가하는 경우 여기 사람 곤란한 향후 참조를 들어, 위의 올바른 허용 대답은 작동하지 않습니다. 당신은 특정의 자손에서 캡처 버블 링 이벤트에 부모 노드 수를 활용 이벤트 위임 할 필요가 콜백을 발행 할 수 있습니다.

   동적으로 체크 박스를 추가하는 경우 여기 사람 곤란한 향후 참조를 들어, 위의 올바른 허용 대답은 작동하지 않습니다. 당신은 특정의 자손에서 캡처 버블 링 이벤트에 부모 노드 수를 활용 이벤트 위임 할 필요가 콜백을 발행 할 수 있습니다.

   // $(<parent>).on('<event>', '<child>', callback);
   $(document).on('change', '.checkbox', function() {
       if(this.checked) {
         // checkbox is checked
       }
   });
   

   참고 그것은 부모의 선택에 대한 문서를 사용하는 거의 항상 필요하다고. 대신 너무 많은 수준을 이벤트를 전파 방지하기 위해보다 구체적인 부모 노드를 선택합니다.

   동적으로 추가 된 DOM 노드의 이벤트가 이전에 정의 된 리스너를 트리거하지 어떻게 표시 아래 예.

   $ postList = $ ( '# 포스트 목록'); $ postList.find ( 'H1') (onH1Clicked '클릭')에.; onH1Clicked 함수 () { 경고 ($ (이)는 .text ()); } // 시뮬레이션 추가 내용 VAR 타이틀 = 2; 함수 generateRandomArticle (제목) { $ postList.append ( '<기사 클래스 = "POST">

   제목'+ 제목 + ' '); } 에서는 setTimeout (generateRandomArticle.bind (NULL, 표제 ++) 1000); 에서는 setTimeout (generateRandomArticle.bind (널 (null), ++ 제목), 5000); 에서는 setTimeout (generateRandomArticle.bind (널 (null), ++ 제목), 10000); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <섹션 ID = "포스트 목록"클래스 = "리스트 포스트 목록"> <기사 클래스 = "POST">

   제목 1 <기사 클래스 = "POST">

   제목 2

   이 예제를 표시합니다 (이 경우 H1) 특정 노드에 대한 캡처 이벤트에 이벤트 위임의 사용, 그리고 이러한 이벤트에 대한 콜백을 실행하는 동안.

   $ postList = $ ( '# 포스트 목록'); $ postList.on ( 'H1'을 '클릭', onH1Clicked); onH1Clicked 함수 () { 경고 ($ (이)는 .text ()); } // 시뮬레이션 추가 내용 VAR 타이틀 = 2; 함수 generateRandomArticle (제목) { $ postList.append ( '<기사 클래스 = "POST">

   제목'+ 제목 + ' '); } 에서는 setTimeout (generateRandomArticle.bind (NULL, 표제 ++) 1000); 에서는 setTimeout (generateRandomArticle.bind (널 (null), ++ 제목), 5000); 에서는 setTimeout (generateRandomArticle.bind (널 (null), ++ 제목), 10000); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <섹션 ID = "포스트 목록"클래스 = "리스트 포스트 목록"> <기사 클래스 = "POST">

   제목 1 <기사 클래스 = "POST">

   제목 2

3. ---

   3.그냥 다른 솔루션

   그냥 다른 솔루션

   $('.checkbox_class').on('change', function(){ // on change of state
      if(this.checked) // if changed state is "CHECKED"
       {
           // do the magic here
       }
   })
   

4. ---

   4.당신의 의도는 (그들이 선택 취소하고 나중에 다시 확인할 때 해고 때문에) 만 확인 체크 박스에 이벤트를 첨부 할 경우,이 당신이 원하는합니다.

   당신의 의도는 (그들이 선택 취소하고 나중에 다시 확인할 때 해고 때문에) 만 확인 체크 박스에 이벤트를 첨부 할 경우,이 당신이 원하는합니다.

   $(function() {
       $("input[type='checkbox']:checked").change(function() {
   
       })
   })
   

   당신의 의도는 모든 체크 박스에 이벤트를 첨부 할 경우 (선택 및 선택 해제)

   $(function() {
       $("input[type='checkbox']").change(function() {
   
       })
   })
   

   당신은 그들이 (체크에서) 확인되는 경우에만 위의 다음 @ 제임스 Allardice 답변을 발사 할 경우.

   BTW 입력 [타입 = '체크 박스'] : 체크는 CSS 셀렉터이다.

5. ---

   5.

   $(document).ready(function () {
       $(document).on('change', 'input[Id="chkproperty"]', function (e) {
           alert($(this).val());
       });
   });
   

6. ---

   6.

   $('#my_checkbox').on('click',function(){
      $('#my_div').hide();
      if(this.checked){
        $('#my_div').show();
      }
   });
   

   $('#my_div').hide();
   if($('#my_checkbox').is(':checked')){
     $('#my_div').show();
   }
   

7. ---

   7.이 확인란이 선택되지 않았거나 찾을 수있는 솔루션입니다. #prop () 함수를 사용 //

   이 확인란이 선택되지 않았거나 찾을 수있는 솔루션입니다. #prop () 함수를 사용 //

   $("#c_checkbox").on('change', function () {
                       if ($(this).prop('checked')) {
                           // do stuff//
                       }
                   });
   

8. ---

   8.아마도 이것은 당신을위한 대안이 될 수 있습니다.

   아마도 이것은 당신을위한 대안이 될 수 있습니다.

   <input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`
   

9. ---

   9.이 jQuery를 검증 시도

   이 jQuery를 검증 시도

   $ (문서) .ready (함수 () { $ ( '# myForm을').의 validate ({// 플러그인을 초기화 규칙 : { 동의하다: { 필수 : 사실 } }, submitHandler : 함수 (형태) { 경고 ( '유효 양식 제출'); false를 반환; } }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"> <형태 ID = "myForm을"행동 = ""METHOD = "POST">

   <입력 유형 = "체크 박스"이름 = "동의"/>
   서비스의 <레이블> 내가 읽고 약관 동의 <버튼 타입 = "제출">

10. ---

    10.이 방식 I의 사용이다, 매우 간단합니다 :

    이 방식 I의 사용이다, 매우 간단합니다 :

    JQuery와 :

    $(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
        var checkbox = $(this), // Selected or current checkbox
            value = checkbox.val(); // Value of checkbox
    
        if (checkbox.is(':checked'))
        {
            console.log('checked');
        }else
        {
            console.log('not checked');
        }
    });
    

    문안 인사!

from https://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event by cc-by-sa and MIT license