jquery action for radio buttons issue with IE

Question

using the method presented here - http://www.techiegyan.com/2008/07/09/using-jquery-check-boxes-and-radio-buttons/

I would like to show a field when the "other" radio button is selected, and to hide the same field otherwise.

The method works correctly on non-IE browsers, but works (almost) the opposite on IE... It looks like IE triggers the "change" event when deselecting an option, rather than when selecting it.

here is the html:

<div><label class="option" for="selection-1"><input type="radio" id="selection-1" name="submitted[selection]" value="10" checked="checked" class="form-radio"> 10</label></div>
<div><label class="option" for="selection-2"><input type="radio" id="selection-2" name="submitted[selection]" value="20" class="form-radio"> 20</label></div>
<div><label class="option" for="selection-3"><input type="radio" id="selection-3" name="submitted[selection]" value="50" class="form-radio"> 50</label></div>
<div><label class="option" for="selection-4"><input type="radio" id="selection-4" name="submitted[selection]" value="100" class="form-radio"> 100</label></div>
<div><label class="option" for="selection-5"><input type="radio" id="selection-5" name="submitted[selection]" value="0" class="form-radio">other</label></div>

<div id="other-selection-wrapper">
 <label for="other-selection">other:</label>
 <input type="text" maxlength="10" name="submitted[other_selection]" id="other-selection" size="10" value="" class="form-text">
</div>

and the script code:

<script type="text/javascript">
$(document).ready(function(){
  $('#other-selection-wrapper').hide();

  $("input[@name='submitted[selection]']").change(function(){
    if ($("input[@name='submitted[selection]']:checked").val() == '0')
      { $('#other-selection-wrapper').show();   }
    else
      { $('#other-selection-wrapper').hide(); }
  });

});
</script>

your code fails even in FF due to the @ in $("input[@name='submitted[selection]']") removing the @ works fine in FF and IE8. i tried in jsfiddle with latest jquery — Alexandros B, Apr 17 '11 at 20:25
I tried, btw, using the keyboard like this: (a) tabbing to the radio-button selections. (b) moving amongst them using the arrow keys. Everything worked correctly when click() was used. — joe, Apr 18 '11 at 13:27

score 1 · Answer 1 · answered Apr 17 '11 at 20:21

1

From the website where you got your example

But I forgot to mention, Internet Exploiter can do it only when you use .click() instead of .change()

answered Apr 17 '11 at 20:21

Alexandros B

1,881
1
23
36

1

The click and change events are quite different, toggling the element using the keyboard is a change event but not a click event. – mu is too short Apr 17 '11 at 20:26
what you say is very true. i was just passing what I understood to be the creator's comment. as I said in my comment to the question all worked fine upon removing the @ – Alexandros B Apr 17 '11 at 20:28
Thanks !! I overlooked this simple, yet important, comment, and banged my head against the wall to find a solution. It surely does the trick. Thanks again !! – joe Apr 18 '11 at 12:53
@mu is too short: This is not the case! See [this similar question](http://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie). The difference between `Click` and `Change` is that `Click` is also raised when it was already selected. – Laoujin Sep 14 '12 at 12:48

score 0 · Answer 2 · answered Apr 17 '11 at 20:42

Why are you trying to assign the radio group to a html array? name="selection" is fine...

From that you should be able to show/hide the other text box like so:

<div>.....</div>
<div><label class="option" for="selection-5"><input type="radio" id="selection-5" name="selection" value="0" class="form-radio">other</label></div>

<div id="other-selection-wrapper">
    <label for="other-selection">other:</label>
    <input type="text" maxlength="10" name="submitted[other_selection]" id="other-selection" size="10" value="" class="form-text">
</div>

the jquery:

$('input[name="selection"]:radio').click(function(){
    if($('input[name="selection"]:radio:checked').val() == 0){
        $('#selection-wrapper').css({'display':'block'});
    }else{
        $('#selection-wrapper').css({'display':'none'});
    }
});

[untested]

jquery action for radio buttons issue with IE

2 Answers2