showing content on selecting radio button

Question

I am trying to create a scenario where I am showing different content on switching the radio button. it is working fine in chrome but not working in IE. Cant figure out what is going wrong.

<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>

what version of jQuery are you using? You probably need to be using `.prop` instead of `.attr` — Matt Busche, Mar 04 '13 at 20:19

gdoron · Accepted Answer · 2013-03-04T20:40:36.130

1

Try replacing:

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

With:

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

And:

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

You added a change event to the div, while it's valid as events do bubble, I would have use this instead:

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

edited Mar 04 '13 at 20:40

answered Mar 04 '13 at 20:19

gdoron

147,333
58
291
367

Q6 is a DIV, not an input. – Diodeus - James MacFarlane Mar 04 '13 at 20:23
@Diodeus, I just commented on your answer, you're wrong, read my comment. – gdoron Mar 04 '13 at 20:25
DAMNNNN @Diodeus Just got called out! – Matt Lo Mar 04 '13 at 20:27

SuperSkunk · Answer 2 · 2013-03-04T20:27:16.103

1

Did you try the is(:selector) method of jQuery? Also, it may be better to attach the event to the input radios directly.

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

edited Mar 04 '13 at 20:27

answered Mar 04 '13 at 20:19

SuperSkunk

1,268
12
24

score 0 · Answer 3 · answered Mar 04 '13 at 20:18

0

$('#Q6') selects the <div>, not the <input>.

You could use $('#Q6 input')

answered Mar 04 '13 at 20:18

idrumgood

4,904
19
29

But he did use `Q6A` and `Q6B` – MarioDS Mar 04 '13 at 20:20
`$('#Q6').change(function(){...` A div does not have a change event. – idrumgood Mar 04 '13 at 20:21
@idrumgood, events in javascript bubble, so the change event of the div does fire. I'm afraid your answer is wrong. – gdoron Mar 04 '13 at 20:24
While technically you're correct (the best kind of correct) in his case with the issue being it not working in IE, this is why. The change event will not bubble in IE. – idrumgood Mar 04 '13 at 20:30

score 0 · Answer 4 · edited May 23 '17 at 12:27

0

There is a native javascript way to check it, see this question and answer.

So in your case:

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

edited May 23 '17 at 12:27

Community

1
1

answered Mar 04 '13 at 20:19

MarioDS

12,895
15
65
121

1

thats not native DOM, you would need to hit the DOM level `$()[].checked` – Matt Lo Mar 04 '13 at 20:20
Hi Matt, can you explain this little bit? – soum Mar 04 '13 at 21:07
I was wrongly assuming that a jQuery object was constructed with all the element's native DOM properties. Just forgot it was always an array. – MarioDS Mar 05 '13 at 07:39

showing content on selecting radio button

4 Answers4