注意输入的更改[type =“checkbox”]

时间:2011-07-04 13:08:34

标签: jquery

如何在复选框更改时运行功能?

我正在尝试编写小复选框替换函数 - 但我做错了。

代码:

(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();

    });

});

PlayGround:LIVE DEMO

5 个答案:

答案 0 :(得分:15)

这是你想要的吗?我的印象是你的事情过于复杂。

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

答案 1 :(得分:10)

您的脚本中存在拼写错误和错误。

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

应该是

if(this.prop('checked'))

if($('.checkbox').prop('checked'))当然会起作用,但为什么再次选择该元素,如果你已经把它作为一个插件并且该元素可以通过this获得?

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

应该是

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

工作演示:http://jsfiddle.net/fkling/yGBAK/40/

也就是说,添加和删除类比更改元素的ID更好(更合乎逻辑)。

答案 2 :(得分:7)

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

我使用了你在复选框(.checkbox)上放置的课程。 它检测复选框状态的变化(这也适用于其他输入)

示例我将警报“更改为”一个复选框被点击或未点击。

如果您想知道每次是否检查:

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

答案 3 :(得分:1)

试试这个:

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

或者

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

答案 4 :(得分:0)

在您的示例中,选择器使用复选框,应为“.checkbox”

我修改了您的示例,因此它可以正常运行:http://jsfiddle.net/yGBAK/41/

我交换了元素的ID。