针对IE中单选按钮的jquery操作

Question

使用这里提出的方法-- http://www.techiegyan.com/2008/07/09/using-jquery-check-boxes-and-radio-buttons/

当选择“其他”单选按钮时，我想显示一个字段，否则就隐藏相同的字段。

该方法在非IE浏览器上工作正常，但在IE上工作(几乎)相反。看起来IE在取消选择选项时触发“更改”事件，而不是在选择选项时触发。

以下是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>

以及脚本代码：

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

Answer 1

从你的例子网站上

，但我忘了提到，只有当您使用.click()而不是.change()

时，互联网开发者才能做到这一点

Answer 2

为什么要将无线电组分配给html数组？Name=“选择”很好.

由此，您应该能够像这样显示/隐藏其他文本框：

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

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'});
    }
});

未测