2

我有一个 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/

4

2 回答 2

5

尝试使用更合适的.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+ 和所有真正的浏览器（耶 CSS3！）上完美运行，比 JS 快得多，甚至当灰头发的人在他们的浏览器上关闭 JS 时也能正常工作。您可以为那些蹩脚的旧浏览器（如 IE6）保存 jQuery。这是 jsFiddle来说明我的意思。

于 2013-03-22T14:14:47.657 回答
0 
the behavior of .is() method in jquery is not as expected.Instead of .is() use .attr():
if($(this).attr("checked") == "checked")){
// code goes here
}
于 2013-03-22T14:17:13.437 回答