Xem để thay đổi đầu vào [loại = "hộp kiểm"]

Question

Làm cách nào để chạy một chức năng khi thay đổi hộp kiểm?

Tôi đang cố gắng viết hộp kiểm nhỏ thay thế cơ sở chức năng trên đó - nhưng tôi đang làm điều gì đó sai.

Code:

(function($) { 
    $.fn.checking = function() { 
     if ($('.checbox').prop('checked', false) === true) { 
      $('.new-checkbox').prop('id', 'unchecked'); 
     } else { 
      $('.new-checkbox').prop('id', 'checked'); 
     } 
    }; 
})(jQuery); 


$(document).ready(function() { 

    $('.checkbox').wrap('<div class="checkbox-wrapper"></div>'); 
    $('.checkbox-wrapper').append('<p class="new-checkbox">Blue = Checked, Red = Unchecked</p>'); 
    $('.checkbox').checking(); 
    $('.checbox').bind('change', function() { 
     $(this).checking(); 

    }); 

}); 

sân chơi: LIVE DEMO

Answer 1

Bạn có một số lỗi chính tả và lỗi trong tập lệnh của mình.

if($('.checbox').prop('checked', false) === true) 
//  ^     ^^^^^^^^^^^^^^^^^ 

nên

if(this.prop('checked')) 

if($('.checkbox').prop('checked')) sẽ làm việc quá tất nhiên, nhưng tại sao chọn phần tử một lần nữa, nếu bạn đã thực hiện nó một plugin và phần tử có sẵn qua this?

Và

$('.checbox').bind('change', function(){ 
// ^

nên

$('.checkbox').bind('change', function(){ 
// ^

bản demo làm việc: http://jsfiddle.net/fkling/yGBAK/40/

Điều đó nói rằng, nó là tốt hơn (logic hơn) để thêm và loại bỏ một lớp hơn là thay đổi ID của phần tử.

Answer 2

Đây có phải là những gì bạn muốn? Tôi cảm thấy rằng bạn là những thứ quá phức tạp.

$('input[type="checkbox"]').change(function() { 
    alert ("The element with id " + this.id + " changed."); 
}); 

Answer 3

Trong ví dụ bạn chọn sử dụng checbox, cần được ".checkbox"

tôi sửa đổi ví dụ của bạn để nó hoạt động: http://jsfiddle.net/yGBAK/41/

tôi trao đổi id cho các yếu tố.

Answer 4

$('.checkbox').change(function(){ 
    alert('changed'); 
}) 

Tôi đã sử dụng lớp bạn đã đặt trên hộp kiểm (.checkbox) cho việc này. Phát hiện thay đổi trong trạng thái hộp kiểm (điều này cũng phù hợp với các đầu vào khác)

Ví dụ tôi đã bao gồm cảnh báo 'đã thay đổi' một hộp kiểm được nhấp hoặc không được đánh dấu.

Nếu bạn muốn biết nếu nó được kiểm tra hay không mỗi lần sau đó:

$('.checkbox').change(function(){ 
    if($(this).is(':checked')){ 
     alert('checked'); 
    } else { 
     alert('not checked'); 
    } 
}); 

Answer 5

Hãy thử điều này:

$('input[type=checkbox]').change(function() { 
    alert("I'm changed!"); 
}); 

Hoặc

$('input[type=checkbox]').change(function() { 
    if ($(this).is(':checked')) { 
     alert('I\'\m --> checked'); 
    } else { 
     alert('I\'\m --> unchecked'); 
    } 
});