代码之家 › 专栏 › 技术社区 › b. e. hollenbeck

jquery/javascript:单击复选框上的事件和“checked”属性

click events jquery javascript

b. e. hollenbeck · 技术社区 · 14 年前

代码:

$('input.media-checkbox').live('click', function(e){

    e.preventDefault();
    var that = $(this);

    if (that.attr('checked') == 'checked'){

        var m = that.attr('media');
        var mid = 'verify_' + m;
        that.parents('div.state-container').find('ul.' + mid).remove();
        that.attr('checked', false);
    } else {

        var url = AJAX_URL;

        $.ajax({
           type: 'GET',
           url: url,
           dataType: 'html',
           success: function(data){

                that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
                that.attr('checked', 'checked');
           }
        }); 
    }

    return false;
});

我在一个表单中进行ajaxing,如果需要,在另一个部分中对相关复选框触发click事件。表单被很好地插入,点击事件被触发,检查需要检查的框并触发第二个ajax,因为 checked 复选框的属性最初是 false 。

使我的奶酪凝结的是如果我取消选中其中一个盒子。尽管 e.preventDefault() , the 选中的 属性设置为 假 在测试之前,所以 if 语句总是执行 else 陈述。我也试过这个 $.is(':checked') ,所以我完全困惑了。

似乎未选中->选中状态读取原始状态,但选中->未选中不会。有帮助吗?

6 回复 | 直到 12 年前

A.Wack 12 年前

我知道已经一年了,但我想我找到了解决办法,

这里的问题是,click事件实际上是在“checked”属性添加到复选框输入之前调用并运行的。因此,函数运行,查看输入是否具有“checked”属性,并运行else条件。然后元素被赋予“checked”属性。

我也遇到了这个问题,我的解决方案是将函数绑定到change函数,而不是click函数,因为change只在更新了输入的checked属性之后才会触发。

希望这能帮助你,如果没有,任何人谁碰巧发现这篇文章,同时遇到类似的问题。

artlung 14 年前

好吧,是的。你已经设置了 live 事件,所以我认为您的脚本也可能对将其设置为选中状态做出响应,但如果没有看到标记,我无法完全知道您在这里要做什么,但这里是我的重写。

$('input.media-checkbox').live('click', function(e){

    if ($(this).is(':checked')) {
        var m = $(this).attr('media');
        var mid = 'verify_' + m;
        $(this).parents('div.state-container')
            .find('ul.' + mid)
            .remove();
        $(this).attr('checked', false);
    } else {
        var url = AJAX_URL;
        var that = this;
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function(data) {
                $(that).parents('li')
                    .siblings('li.verification')
                    .children('div.media-verification')
                    .append(data)
                    .fadeIn(500);
                $(that).attr('checked', true);
            }
        }); 
    }
    return false;

});

Ajaxe 14 年前

尝试使用 e.stopPropagation() 而不是 e.preventDefault() 同时移除 return false . 返回 false 在jquery中等价于 停止传播() + 预防性违约() 。 预防性违约() 阻止复选框 checked 。

karim79 14 年前

似乎是由于异步请求。处决过去了 $.ajax ,在成功回调之前。再次单击该复选框时,其状态尚未由上一个请求的回调更新。您可以尝试在启动ajax调用之前禁用checkbox控件,并在成功回调中再次启用它:

that.attr("disabled", "disabled");
var url = AJAX_URL;   
$.ajax({
    type: 'GET',
    url: url,
    dataType: 'html',
    success: function(data){

        that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
        that.attr('checked', 'checked');
        that.removeAttr('disabled');
    }
});

这将确保连续两次点击不会导致不可预测的行为。另一种方法是使用同步请求,即。 async: false 但这将在整个浏览器的持续时间内阻止它。

hetu 14 年前

我想是由于ie.check/set属性中的一个奇怪错误 默认选中 随着 选中的 . 在你的条件下试试这个,

if (that.attr('checked')=='checked' || that.attr("defaultChecked")=='checked'){     
      var m = that.attr('media');  
      var mid = 'verify_' + m;
      that.parents('div.state-container').find('ul.' + mid).remove();
      that.attr('checked', false);
      that.attr('defaultChecked', false); 
} else {

mVChr 14 年前

这可能只是部分答案,但在你的测试中, $(this).attr('checked') 应该回来 true 如果勾选并且 false 如果没有。所以把你的条件改成 if (that.attr('checked'))