jquery action for radio buttons issue with IE

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">
 <labe开发者_开发问答l 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>

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

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]