jQuery, 체크 박스 및 .is (“: checked”)

함수를 다음과 같은 확인란 요소에 바인딩 할 때 :

$("#myCheckbox").click( function() {
    alert($(this).is(":checked"));
});

체크 박스 는 이벤트가 트리거 되기 전에 체크 된 속성을 변경합니다 . 이것은 정상적인 동작이며 반대 결과를 제공합니다.

그러나 내가 할 때 :

$("#myCheckbox").click();

확인란 은 이벤트가 트리거 된 후 확인 된 속성 을 변경합니다 .

내 질문은 일반적인 클릭처럼 jQuery에서 클릭 이벤트를 트리거하는 방법이 있습니까 (첫 번째 시나리오)?

추신 : 나는 이미 시도했습니다 trigger('click');

$('#myCheckbox').change(function () {
    if ($(this).prop("checked")) {
        // checked
        return;
    }
    // not checked
});

참고 : 이전 버전의 jquery에서는 attr. 이제prop 상태를 읽는 데 사용 하는 것이 좋습니다 .

jQuery 1.3.2 및 1.4.2 에서 작동하는 해결 방법이 있습니다 .

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

하지만 동의합니다.이 동작은 네이티브 이벤트에 비해 버그가있는 것 같습니다.

2016 년 6 월 현재 (jquery 2.1.4 사용) 다른 제안 된 솔루션은 작동하지 않습니다. 확인은 attr('checked')항상 반환 undefined하고 is('checked)항상 반환합니다 false.

prop 메소드를 사용하십시오.

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

jQuery 1.7.2에서 여전히이 문제가 발생합니다. 간단한 해결 방법은 setTimeout을 사용하여 클릭 핸들러의 실행을 연기하고 그 동안 브라우저가 마법을 수행하도록하는 것입니다.

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});

이처럼 원치 않는 동작을 예상한다면 jQuery.trigger ()의 추가 매개 변수를 체크 박스의 클릭 핸들러로 전달하는 것이 좋습니다. 이 추가 매개 변수는 사용자가 체크 박스 자체를 직접 클릭하는 대신 클릭이 프로그래밍 방식으로 트리거되었음을 클릭 핸들러에 알리기위한 것입니다. 체크 박스의 클릭 핸들러는보고 된 체크 상태를 반전시킬 수 있습니다.

ID가 "myCheckBox"인 확인란에서 클릭 이벤트를 트리거하는 방법은 다음과 같습니다. 또한 true로 설정된 단일 멤버 인 nonUI를 사용하여 개체 매개 변수를 전달하고 있습니다.

$("#myCheckbox").trigger('click', {nonUI : true})

체크 박스의 클릭 이벤트 핸들러에서이를 처리하는 방법은 다음과 같습니다. 핸들러 함수는 두 번째 매개 변수로 nonUI 객체의 존재를 확인합니다. (첫 번째 매개 변수는 항상 이벤트 자체입니다.) 매개 변수가 존재하고 true로 설정되면보고 된 .checked 상태를 반전합니다. 이러한 매개 변수가 전달되지 않으면 (사용자가 UI의 확인란을 클릭하기 만하면되지 않음) 실제 .checked 상태를보고합니다.

$("#myCheckbox").click(function(e, parameters) {
   var nonUI = false;
        try {
            nonUI = parameters.nonUI;
        } catch (e) {}
        var checked = nonUI ? !this.checked : this.checked;
        alert('Checked = ' + checked);
    });

http://jsfiddle.net/BrownieBoy/h5mDZ/의 JSFiddle 버전

Chrome, Firefox 및 IE 8에서 테스트했습니다.

<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">    

var atrib = $('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if ($(this).is(":checked")) 
{
$('.mycheck').attr("unchecked",false);
   alert("checkbox checked");
}
else
{
$('.mycheck').attr("unchecked",true);
 alert("checkbox unchecked");
}
});

  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE

음, 첫 번째 시나리오와 일치시키기 위해 이것은 제가 생각해 낸 것입니다.

http://jsbin.com/uwupa/edit

기본적으로 "클릭"이벤트를 바인딩하는 대신 "변경"이벤트를 경고와 바인딩합니다.

그런 다음 이벤트를 트리거 할 때 먼저 클릭을 트리거 한 다음 변경을 트리거합니다.

Nick Craver의 답변 외에도 이것이 제대로 작동하려면 IE 8확인란에 추가 클릭 핸들러를 추가해야합니다.

// needed for IE 8 compatibility
if ($.browser.msie)
    $("#myCheckbox").click(function() { $(this).trigger('change'); });

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');

그렇지 않으면 IE 8체크 박스와 라디오를 클릭 할 때 포커스를 유지 하므로 체크 박스가 포커스를 잃을 때만 콜백이 트리거됩니다 .

_{IE 9그래도 테스트하지 않았습니다 .}

$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});

가장 빠르고 쉬운 방법 :

$('#myCheckbox').change(function(){
    alert(this.checked);
});

$el[0].checked;

$ el-jquery 선택 요소입니다.

즐겨!

if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });