Поймать проверенное событие изменения флажка

125

Как мне поймать событие проверки / снятия отметки <input type="checkbox" />с помощью jQuery?

jquery unchecked

1

Если вы используете относительно новую версию JQuery, я бы использовал .on ('change', function () {...}), как указано в ответе @Daniel De Leon ниже. Преимущество "включенного" прослушивателя событий будет связываться с динамически сгенерированным HTML.

— BLang 08

172

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

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

Изменить: при этом не будет зафиксировано изменение флажка по другим причинам, кроме щелчка, например, при использовании клавиатуры. Чтобы избежать этой проблемы, слушайте changeвместо click.

Для программной проверки / снятия флажка см. Почему не запускается событие смены флажка?

— marcgg
источник

document.getElementById ('something'). checked работает, почему $ ('# something'). checked не работает?

— omg

В вашем коде отсутствует параметр, и действительно следует использовать способ jQuery для получения состояния проверки.

— Пит Мишо,

2

Шор: причина, по которой getElementById работает, заключается в том, что он возвращает элемент DOM, тогда как функция $ jQuery возвращает объект jQuery. Объект jQuery имеет элемент DOM как свойство, но сам по себе не является объектом DOM.

— Пит Мишо,

3

Я знаю, что опаздываю на вечеринку, но это работает, только когда это вызывает событие «щелчок». Если по какой-то причине вы должны были сделать что-то подобное в другом месте кода: $ ("# something"). Attr ("checked", "checked") событие щелчка никогда не сработает.

— David Stinemetze

3

@DavidStinemetze: Я бы сказал, что вы можете слушать тонну, changeа не щелкать.

— Обновляю

44

Щелчок повлияет на метку, если она прикреплена к флажку ввода?

Я думаю, что лучше использовать функцию .change ()

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

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

— Дидак Риос
источник

1

Это должен быть принятый ответ, поскольку вопрос заключается в прослушивании события проверки, а не события щелчка.

— Джессика

26

Используйте селектор : checked , чтобы определить состояние флажка:

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

— karim79
источник

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 W
источник

Как судить, проверено или нет?

— omg

Мне нужно знать, означает ли щелчок установить или снять отметку.

— omg

1

затем вы можете использовать $ (this) .is (': checked') для проверки состояния элемента, по которому только что щелкнули мышью

— Ty 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 06