Bắt sự kiện thay đổi đã chọn của hộp kiểm

125

Làm cách nào để bắt sự kiện kiểm tra / bỏ chọn <input type="checkbox" />với jQuery?

jquery unchecked

— Chúa ơi
nguồn

1

Nếu bạn đang sử dụng một phiên bản JQuery tương đối mới, tôi sẽ sử dụng .on ('thay đổi', hàm () {...}) như được đề cập trong câu trả lời của @Daniel De Leon bên dưới. Một lợi thế, trình nghe sự kiện "bật" sẽ liên kết với html được tạo động.

— BLang

172

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

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

Chỉnh sửa: Làm điều này sẽ không bắt khi hộp kiểm thay đổi vì lý do khác ngoài nhấp chuột, như sử dụng bàn phím. Để tránh vấn đề này, hãy lắng nghe changethay vì click.

Để kiểm tra / bỏ chọn chương trình, hãy xem Tại sao sự kiện thay đổi hộp kiểm của tôi không được kích hoạt?

— marcgg
nguồn

document.getEuityById ('cái gì đó'). đã kiểm tra hoạt động, tại sao $ ('# cái gì đó'). kiểm tra không hoạt động?

— omg

Mã của bạn thiếu paran và thực sự nên sử dụng cách jQuery để lấy trạng thái kiểm tra.

— Pete Michaud

2

Shore: lý do getEuityById hoạt động là vì nó trả về một phần tử DOM, trong khi hàm $ jQuery trả về một đối tượng jQuery. Đối tượng jQuery có thành phần DOM là một thuộc tính, nhưng bản thân nó không phải là một đối tượng DOM.

— Pete Michaud

3

Tôi biết rằng tôi đến bữa tiệc muộn, nhưng điều này chỉ hoạt động khi một sự kiện "nhấp chuột" kích hoạt điều này. Nếu vì một lý do nào đó, bạn đã làm một cái gì đó như thế này ở nơi khác trong mã: $ ("# gì đó"). Attr ("đã kiểm tra", "đã kiểm tra") thì sự kiện nhấp sẽ không bao giờ được kích hoạt.

— David Stinemetze

3

@DavidStinemetze: Tôi muốn nói rằng bạn có thể nghe ton changethay vì nhấp. Tôi đang cập nhật câu trả lời

— marcgg

44

Nhấp chuột sẽ ảnh hưởng đến nhãn nếu chúng ta có một nhãn được gắn vào hộp kiểm đầu vào?

Tôi nghĩ rằng tốt hơn là sử dụng hàm .change ()

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

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

— Dídac Rios
nguồn

1

Đây phải là câu trả lời được chấp nhận, vì câu hỏi là về việc lắng nghe một sự kiện kiểm tra, không phải là một sự kiện nhấp chuột.

— Jessica

26

Sử dụng bộ chọn : đã chọn để xác định trạng thái của hộp kiểm:

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

— karim79
nguồn

13

Đối với JQuery 1.7+, hãy sử dụng:

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

— Daniel De León
nguồn

4

Sử dụng đoạn mã dưới đây để đạt được điều này.:

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

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

Hoặc bạn có thể làm tương tự với hộp kiểm duy nhất:

$('#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'); 
  }
});

Đối với bản demo: http://jsfiddle.net/creativegala/hTtxe/

— Arun kumar
nguồn

3

Theo kinh nghiệm của tôi, tôi đã phải tận dụng mục tiêu hiện tại của sự kiện:

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

— Brandon Aaskov
nguồn

3

Mã này làm những gì bạn cần:

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

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

Ngoài ra, bạn có thể kiểm tra nó trên jsfiddle

— Deepak saini
nguồn

2

sử dụng sự kiện nhấp để tương thích tốt nhất với MSIE

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

— Ty W
nguồn

Làm thế nào để đánh giá nếu nó được kiểm tra hay không?

— omg

Tôi cần biết liệu một nhấp chuột có nghĩa là kiểm tra hoặc bỏ chọn nó.

— omg

1

sau đó bạn có thể sử dụng $ (this) .is (': đã kiểm tra') để kiểm tra trạng thái của mục vừa nhấp

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

— santosh
nguồn

15

Hey! Bạn thân, bạn đang làm gì ở đây?

— omg

Trông giống như một lựa chọn phạm vi (nghĩa là kiểm tra mục đầu tiên, giữ phím shift, kiểm tra mục cuối cùng và tất cả các mục giữa được kiểm tra.) Tuy nhiên, điều này nhiều hơn nhiều so với câu hỏi yêu cầu. Thiếu một số mã mặc dù, như checkUncheck ALL ().

— tham gia