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

Question

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

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

485 9

jQuery unchecked

9 ответов:

Comments

Ничего не найдено.

marcgg · Accepted Answer · 2017-05-23 15:02:37

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

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});
изменить: это не будет ловить, когда флажок изменяется по другим причинам, чем щелчок, например, с помощью клавиатуры. Чтобы избежать этой проблемы, слушайте changeвместо click.

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

Dídac Rios · Accepted Answer · 2012-01-04 10:31:00

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

Я думаю, что лучше использовать .изменить () функцию
<input type="checkbox" id="something" />

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

karim79 · Accepted Answer · 2009-09-21 18:58:53

использовать :проверено селектор для определения состояния флажка это:
$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});

Daniel De León · Accepted Answer · 2014-06-18 23:56:10

для JQuery 1.7 + используйте:
$('input[type=checkbox]').on('change', function() {
  ...
});

Arun Kumar · Accepted Answer · 2016-08-15 14:52:56

используйте ниже фрагмент кода для достижения этой цели.:
$('#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/

Brandon Aaskov · Accepted Answer · 2015-04-27 08:30:03

по моему опыту, мне пришлось использовать currentTarget мероприятия:
$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

Ty W · Accepted Answer · 2009-09-21 18:48:23

используйте событие click для лучшей совместимости с MSIE
$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

Deepak saini · Accepted Answer · 2016-09-07 18:32:53

этот код делает то, что надо:
<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});
кроме того, вы можете проверить его на jsfiddle

santosh · Accepted Answer · 2017-12-20 14:35:30

$(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>