체크 박스의 확인 된 변경 이벤트 포착

125

<input type="checkbox" />jQuery로 확인 / 확인 해제 이벤트를 잡는 방법은 무엇입니까?

jquery unchecked

— 세상에
소스

1

비교적 새로운 버전의 JQuery를 사용하는 경우 아래 @Daniel De Leon의 답변에서 언급했듯이 .on ( 'change', function () {...})을 사용합니다. 장점은 "on"이벤트 리스너가 동적으로 생성 된 html에 바인딩된다는 것입니다.

— BLang

172

<input type="checkbox" id="something" />

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

편집 : 이렇게하면 키보드 사용과 같은 클릭 이외의 이유로 확인란이 변경 될 때 포착되지 않습니다. 이 문제를 방지하려면 change대신 click.

프로그래밍 방식으로 선택 / 선택 취소하려면 내 확인란 변경 이벤트가 트리거되지 않는 이유를 참조하세요.

— Marcgg
소스

document.getElementById ( 'something'). checked works, 왜 $ ( '# something'). checked가 작동하지 않습니까?

— omg

코드에 paran이 누락되어 있으며 실제로 확인 상태를 가져 오는 jQuery 방식을 사용해야합니다.

— Pete Michaud

2

Shore : getElementById가 작동하는 이유는 DOM 요소를 반환하는 반면 $ jQuery 함수는 jQuery 객체를 반환하기 때문입니다. jQuery 객체는 DOM 요소를 속성으로 가지고 있지만 그 자체가 DOM 객체는 아닙니다.

— Pete Michaud

3

나는 내가 파티에 늦게 도착한다는 것을 알고 있지만 이것은 "클릭"이벤트가 이것을 트리거 할 때만 작동합니다. 어떤 이유로 코드의 다른 곳에서 다음과 같은 작업을 수행해야하는 경우 : $ ( "# something"). attr ( "checked", "checked") 클릭 이벤트가 트리거되지 않습니다.

— David Stinemetze

3

@DavidStinemetze : change클릭 대신 톤 을 들을 수 있다고 말하고 싶습니다 . 나는 대답을 업데이트하고 있습니다

— marcgg

44

입력 확인란에 레이블이 첨부되어 있으면 클릭이 레이블에 영향을 미칩니 까?

.change () 함수를 사용하는 것이 더 낫다고 생각합니다.

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});

— 디닥 리오스
소스

1

질문은 클릭 이벤트가 아닌 확인 이벤트를 수신하는 것에 관한 것이므로 허용되는 답변이어야합니다.

— Jessica

26

사용 검사 : 체크 박스의 상태를 결정하는 선택을 :

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});

— 카림 79
소스

13

JQuery 1.7 이상 사용 :

$('input[type=checkbox]').on('change', function() {
  ...
});

— 다니엘 드 레온
소스

4

이를 위해 아래 코드 스 니펫을 사용하십시오. :

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

또는 단일 확인란으로 동일한 작업을 수행 할 수 있습니다.

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

데모 : http://jsfiddle.net/creativegala/hTtxe/

— 아룬 쿠마르
소스

3

내 경험상 이벤트의 currentTarget을 활용해야했습니다.

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

— 브랜든 아 스코프
소스

3

이 코드는 필요한 작업을 수행합니다.

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

또한 jsfiddle에서 확인할 수 있습니다.

— 디팍 사이 니
소스

2

MSIE와의 최상의 호환성을 위해 클릭 이벤트 사용

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

— Ty여
소스

확인 여부를 판단하는 방법은 무엇입니까?

— omg

클릭이 선택 또는 선택 취소를 의미하는지 알아야합니다.

— omg

1

방금 클릭 된 항목의 상태를 테스트 : ( '확인')는 다음 .is는 (이) $를 사용할 수 있습니다

— 타이 W

-1

$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML :

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

— 산토스
소스

15

이봐! 버디, 여기서 뭐해?

— omg

범위 선택처럼 보입니다 (즉, 첫 번째 항목을 확인하고 Shift 키를 누른 상태에서 마지막 항목을 확인하고 그 사이의 모든 항목을 확인합니다.) 그러나 이것은 질문이 요구하는 것보다 훨씬 많은 것입니다. 그러나 checkUncheckAll ()과 같은 일부 코드가 누락되었습니다.

— joelsand