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

Làm cách nào để tôi nắm bắt/bỏ chọn sự kiện <input type="checkbox" /> bằng jQuery?Bắt sự kiện thay đổi đã kiểm tra của hộp kiểm

Nguồn

2009-09-21 omg

Nếu bạn đang sử dụng một phiên bản tương đối mới của JQuery, tôi sẽ sử dụng .Trên ('thay đổi', function() {...}) như đã đề 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

127

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

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

Edit: Việc làm này sẽ không bắt khi hộp kiểm thay đổi vì lý do khác hơn là một nhấp chuột, như sử dụng bàn phím. Để tránh sự cố này, hãy nghe change thay vì click.

Đối với kiểm tra/bỏ chọn lập trình, hãy nhìn vào Why isn't my checkbox change event triggered?

Nguồn

2009-09-21 15:50:11 marcgg

document.getElementById ('something') .kiểm tra hoạt động, tại sao $ ('# something'). không làm việc? – omg

Mã của bạn thiếu một dấu ngoặc đơn và thực sự nên sử dụng cách jQuery để nhận trạng thái kiểm tra. –

Vì $ ('# something') trả về một đối tượng jQuery không phải là một ElementNode –

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

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

Nguồn

2009-09-21 15:48:23

Làm cách nào để đánh giá xem nó có được kiểm tra hay không? – omg

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

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

Sử dụng selector :checked để xác định trạng thái của hộp kiểm:

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

Nguồn

2009-09-21 15:51:10 karim79

cần dấu ngoặc đơn khác trong điều kiện của bạn ... nếu ($ (this) ... –

@Ty W - cảm ơn, đã sửa. – karim79

-2

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

Nguồn

2009-09-21 15:57:36 santosh

+14

Hey! Buddy, bạn đang làm gì ở đây? – omg

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

Sử dụng các đoạn mã dưới đây et để đạt được 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 tra 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/

Nguồn

2011-11-16 09:24:23

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

Tôi nghĩ rằng đó là tốt hơn để sử dụng .change() chức năng

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

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

Nguồn

2012-01-04 08:31:00

Đối với JQuery 1.7+ sử dụng:

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

Nguồn

2014-06-18 20:56:10

Theo kinh nghiệm của tôi, tôi đã tận dụng currentTarget của sự kiện :

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

Nguồn

2015-04-27 05:30:03

mã này làm những gì nhu cầu của bạ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

Nguồn

2016-09-07 13:35:33

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

Trả lời

Các vấn đề liên quan