2012-08-13 4 views
3

jquery를 사용하여 확인란을 선택하거나 정보를 사용할 수 있어야하는 자바 스크립트를 작성하려고합니다. 이것은 체크 박스 (id 'edit-toggle-me')가 클릭 될 때마다 발생해야합니다. 나는 그것이 성공했는지 안했는지 알기 위해 alert()과 함께 이것을위한 테스트 함수를 작성했다.자바 스크립트를 사용하여 확인란의 상태를 가져옵니다

(function ($) { 
    "use strict"; 
    $(document).ready(function() { 

     $('#edit-toggle-me').click(function(){ 

      if ($('#edit-toggle-me').checked()) { 
       alert('Yup!'); 
      } 
      else { 
      alert('Nup!'); 
      } 


     }); 
    }); 

})(jQuery); 

경고가 표시되지 않으므로 $ ('# edit-toggle-me')에서 충돌이 발생합니다. checked(). 나는 왜 그런지 모르겠다.

나는 또한이 시도했습니다

(function ($) { 

    $(document).ready(function() { 

     $('#edit-toggle-me').click(function(){ 
      var elementy = document.getElementById('edit-toggle-me'); 
      var check = elementy.value; 
      alert(check); 
      if(elementy.checked()) { 
       alert('yup'); 
      } 
     }); 
    }); 
})(jQuery); 

첫 번째 경고 작동하지만 둘 또는 마지막이 '응'또는 'NUP을'.

(function ($) { 

    $(document).ready(function() { 

     $('#edit-toggle-me').click(function(){ 

      var element2 = document.getElementById('edit-toggle-me'); 
      var check = element2.value; 
      alert(check); 

     }); 
    }); 
    })(jQuery); 

이 항상 돌아가 나는 이유 중 하나 이해하지 못하는 1 :

는 그리고 나는 또한이 시도.

힌트를 보내 주시면 감사하겠습니다.

+0

놀랍지도 않았습니까?이 질문을 던지기까지 허락했습니다. – mplungjan

답변

4

jQuery 또는 DOM API에 .checked()과 같은 메소드가 없습니다. 요소에 체크 표시가있는 경우 .checked 속성은 true이고 그렇지 않으면 false입니다. 이 시도 :

(function ($) { 
    "use strict"; 
    $(document).ready(function() { 

     $('#edit-toggle-me').click(function(){ 
      alert(this.checked ? ":)" : ":("); 
     }); 
    }); 

})(jQuery); 

참조 데모 : http://jsfiddle.net/scZ3X/

5

사용 .is(':checked'). 설명서 HERE을 찾을 수 있습니다.

JSFIDDLE

+0

체크 박스 DOM 요소의'checked' 속성을 사용하는 것이 더 간단하고 빠르며 호환성이 좋습니다. –

0

이 시도 :

$('#edit-toggle-me').is(':checked') 
1
$(function(){ 
    $('#edit-toggle-me').on('change', function(){ 
     if($(this).is(':checked')) { 
      alert('checked'); 
     } 
     else { 
      alert('unchecked'); 
     } 
    }); 
}); 

당신은 대신을 클릭 변경 이벤트를 사용할 수 있어야합니다. 왜냐하면 어떤 경우에는 클릭 이벤트가 확인란과 라디오 버튼에 사용하기에 좋지 않기 때문입니다.

예 1 :

당신은 라디오 버튼 클릭 이벤트 바인딩이있는 경우. 귀하의 라디오 버튼이 이미 사실이고 라디오 버튼을 클릭하는 경우. 라디오 버튼 값은 변경하지 않지만 클릭 이벤트는 매번 실행됩니다.

그러나 변경 이벤트를 사용하는 경우. 이벤트는 라디오 버튼 값이 변화를 가지고있는 경우에만 발생합니다 (만약 그 이미 확인 또는 사실이 아니다)

예 2 : 어떤 라디오 버튼에 대한 라벨이 있거나 체크 박스를 선택하면 을. 체크 박스 또는 라디오 버튼에서 이벤트 묶기를 클릭 한 경우. 라벨을 클릭하면 확인란이나 라디오 버튼 값이 변경되었지만 클릭 이벤트는 호출되지 않습니다.

이벤트가 변경 될 경우. 레이블 관련 레이블을 클릭 할 때 예상대로 작동합니다.

관련 문제