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

您是否尝试过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 3

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

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

Answer 4

有一种原生的javascript方式可以查看它，请参阅this question and answer。

所以在你的情况下：

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

显示选择单选按钮的内容

4 个答案: