[jquery] 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.21.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');
  }
});