显示内容选择单选按钮

Question

我想创建一个场景，我在切换单选按钮时显示不同的内容。它在Chrome中工作正常，但不能在IE中工作。不清楚发生了什么问题。

<div id="Q6"> 
    <input type="radio" id="Q6A" value="yes" name="Q6"/>Same as current address<br/> 
    <input type="radio" id="Q6B" value="no" name="Q6"/>New address<br/> 
</div> 

<div id="Q6Aoutput" style="display:none;">1</div> 
<div id="Q6Boutput" style="display:none;">2</div> 

<script> 
$('#Q6').change(function(){ 
    if($('#Q6A').attr('checked')){ 
    $('#Q6Aoutput').show(); 
    }else{ 
    $('#Q6Aoutput').hide(); 
    } 
    // 
    if($('#Q6B').attr('checked')){ 
     $('#Q6Boutput').show(); 
    }else{ 
     $('#Q6Boutput').hide(); 
    } 
}); 
</script> 

Answer 1

尝试更换：

if($('#Q6A').attr('checked')){ 

有了：

if($('#Q6A').prop('checked')){ 

和：

$('#Q6').change(function(){ 

你添加一个变化事件到div，而它是有效的events do bubble，我将不得不使用它代替：

$('input[name="Q6"]').click(function(){ 
    $('#Q6Boutput').toggle(this.id == "Q6B"); 
    $('#Q6Aoutput').toggle(this.id == "Q6A"); 
}); 

Answer 2

$('#Q6')选择<div>，而不是<input>。

你可以使用$('#Q6 input')

Answer 3

你尝试的jQuery is(:selector)方法？ 此外，将事件直接附加到输入收音机可能会更好。

$('#Q6A').change(function(){ 
    if($(this).is(':checked')){ 
    $('#Q6Aoutput').show(); 
    }else{ 
    $('#Q6Aoutput').hide(); 
    } 
}); 
$('#Q6B').change(function(){ 
    if($(this).is(':checked')){ 
     $('#Q6Boutput').show(); 
    }else{ 
     $('#Q6Boutput').hide(); 
    } 
}); 

Answer 4

有一种本地javascript方法来检查它，请参阅this question and answer。

所以你的情况：

if($('#Q6A').checked){ 
    //etc 
}