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]
精彩评论