Ловіть прапорець змінити прапорець

125

Як я можу зафіксувати подію перевірки / зняти прапорець за <input type="checkbox" />допомогою jQuery?

jquery unchecked

1

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

— BLang

172

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

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

Редагувати: це не спричинить, коли прапорець зміниться з інших причин, ніж клацання, наприклад, за допомогою клавіатури. Щоб уникнути цієї проблеми, слухайте changeзамість цього click.

Щоб перевірити / зняти прапорці програмно, погляньте на те, Чому подія зміни мого прапорця не спрацьовує?

— marcgg
джерело

document.getElementById ('щось'). перевірено працює, чому $ ('# щось'). перевірено не працює?

— omg

У вашому коді відсутній пара, і він дійсно повинен використовувати спосіб jQuery для отримання стану перевірки.

— Піт Мішо

2

Shore: причина getElementById працює в тому, що він повертає елемент DOM, тоді як функція $ jQuery повертає об'єкт jQuery. Об'єкт jQuery має елемент DOM як властивість, але він сам по собі не є об'єктом DOM.

— Піт Мішо

3

Я знаю, що я спізно приїжджаю на вечірку, але це працює лише тоді, коли подія "натискання" викликає це. Якби ви чомусь зробили щось подібне в іншому місці коду: $ ("# щось").

— Девід Стінемеце

3

@DavidStinemetze: Я б сказав, що ви можете слухати тон changeзамість клацання. Я

— оновлюю

44

Клацання вплине на мітку, якщо у неї встановлено прапорець введення?

Я думаю, що краще використовувати функцію .change ()

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

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

— Дідак Ріос
джерело

1

Це має бути прийнятою відповіддю, оскільки питання стосується прослуховування події перевірки, а не події клацання.

— Джессіка

26

Використовуйте : перевіряється селектор , щоб визначити стан CheckBox в:

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

На моєму досвіді мені довелося використовувати поточну ціль події:

$("#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 (': перевірено') для перевірки стану лише що натиснутого елемента

— 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

Схоже, вибір діапазону (тобто, перевірте перший елемент, утримуйте зсув, перевірте останній; і всі між ними перевірені.) Однак це набагато більше, ніж запитання задається. Хоча якийсь код відсутній, як, наприклад, checkUncheckAll ().

— joelsand