javascript - 如果单选按钮是 (':checked' ) - 无法正常工作

Question

我有一个 JavaScript 代码，用于在选中单选按钮时显示一个字段。该代码运行完美，但是当我取消选中 radio 时，该字段不会隐藏。它还显示 <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 here ，您的事件没有使用正确的选择器触发。以下是更新的内容:

$('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+ 和所有真正的浏览器上完美工作(是的 CSS3!)，比 JS 快得多，甚至当白发人在浏览器上关闭 JS 时也可以工作。您可以为那些蹩脚的旧浏览器(如 IE6)保存 jQuery。 Here is the jsFiddle来表达我的意思。