如果单选按钮.is(':选中') - 无法正常工作

Question

我有一个javascript代码,用于在检查单选按钮时显示字段.代码工作正常,但是当我取消选中收音机时,该字段不会隐藏.它还会显示<span>选中单选按钮的时间,但是当未选中时,跨度也不会隐藏..

<script>
$(function() {
    $('#radiopromo2').live('change', function() {
        if($(this).is(':checked')) {
            $("#fieldtraining").show();
            $("#radio3").show();
        } else {
            $("#fieldtraining").hide();
            $("#radio3").hide();
        }
    }).trigger('change');
});
</script>

谁可以帮助我？我做了一个jsfiddle http://jsfiddle.net/4UH2H/8/

Answer 1

尝试使用更合适的.prop():

if($(this).prop('checked')){

甚至是普通的旧Javascript(它的速度更快):

if(this.checked){

这对我来说总是有用的.另外,.live()不赞成使用.on(),对于单选按钮,最好使用click而不是change因为较旧的webkit版本错误无法正确识别onchange:

$('#radiopromo2').on('click',function(){

有了这些变化,你应该是金色的.

编辑 基于这里的jsFiddle,你的事件没有用正确的选择器解雇.这是更新的东西:

$('input[name="radiotraining"]').on('click', function () {
    if ($('#radiopromo2').prop('checked')) {
        $("#fieldtraining").show();
        $("#radio3").show();
    } else {
        $("#fieldtraining").hide();
        $("#radio3").hide();
    }
});

有用!好极了!虽然看看你的jsFiddle,你真的应该考虑使用CSS而不是jQuery来实现这样的基本显示/隐藏:

#fieldtraining,#radio3 {
    display:none;
}

#radiopromo2:checked + #radio2 > #radio3 {
    display:inline;
}

#radiopromo2:checked ~ #fieldtraining {
    display:block;
}

使用IE9 +和所有真正的浏览器(yay CSS3!)都可以很好地工作,比JS更快,即使greyhairs在他们的浏览器上关闭JS也能工作.您可以为那些蹩脚的旧浏览器(如IE6)保存jQuery.这是jsFiddle来展示我的意思.