jQuery .prop添加/删除单选按钮上的类 - 不工作

问题描述：

我需要在一系列单选按钮和复选框上添加/删除泛型类（类似.is-checked）。下面是我的代码：jQuery .prop添加/删除单选按钮上的类 - 不工作

$(function() { 
    $('input[type="checkbox"], input[type="radio"]').each(function() { 
    $(this).on('click', function() { 
     $(this).parent().wrap('<div>').unwrap(); 
     // works great for checkboxes, but not for radios 
     if ($(this).prop('checked')) { 
      $(this).addClass('is-checked'); 
     } else { 
      $(this).removeClass('is-checked'); 
     } 
    }) 
    }) 
})

这工作完全在复选框，但对被添加到单选按钮类永远不会被删除。思考？想法？

编辑我不小心忘了提及，这个脚本会因为被有条件地加载IE8“：选中”不支持伪选择。整个功能在除IE8以外的任何地方都可以很好地工作，所以这对浏览器来说是一个拐杖，而穷人用户则处理它。最后，'is-checked'类会触发与checked选择器相同的CSS。

为什么ü使用'$（本）。在（ '点击'，函数（）{'在'each'？u能详细点吗？ – krishgopinath

你的代码似乎为我工作。这两个点击事件都在触发，并设置了is-checked类。http://jsfiddle.net/xzNPh/ –

@WillemEllis可能是jQuery版本的区别（认为它是1.6改变了'attr'的行为并且'prop'） – sgroves

答

我现在看到你以后。问题是这条线：

$(this).removeClass('is-checked');

它只是从被点击的元素中删除.is-checked。这适用于复选框，但由于无线电的工作方式不同，这不起作用。为了解决这个问题，做这样的事情：

$(function() { 
    $('input[type="checkbox"], input[type="radio"]').on('click', function() { 
     $(this).parent().wrap('<div>').unwrap(); 
     $('input[type="checkbox"], input[type="radio"]').each(function() { 
      $(this).is(':checked') ? $(this).addClass('is-checked') : $(this).removeClass('is-checked'); 
     }); 
    }); 
});

http://jsfiddle.net/xzNPh/4/

完全按照预期工作，谢谢先生！ – cmegown

答

尝试使用原生属性：

$('input[type="checkbox"], input[type="radio"]').on('click', function() { 
     $(this).parent().wrap('<div>').unwrap(); 
     if (this.checked) { 
      $(this).addClass('is-checked'); 
     } else { 
      $(this).removeClass('is-checked'); 
     }  
});

答

如何：

var inputs = $('input[type="checkbox"], input[type="radio"]'); 
inputs.on('click', function() { 
    $(this).parent().wrap('<div>').unwrap(); 
    inputs.removeClass('is-checked'); 
    $(this).toggleClass('is-checked', $(this).prop('checked', true)); 
});

你还没有解释什么是它，所以我不会冒险，如果你猜甚至需要这些代码。例如。如果它只是造型，那么也许CSS会在这里做得很好。

而一个fiddle

jQuery .prop添加/删除单选按钮上的类 - 不工作

相关推荐