IE中单选按钮的jquery操作问题

jquery action for radio buttons issue with IE

本文关键字：操作 问题 jquery 单选按钮 IE      更新时间：2023-09-26

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

我想显示字段时，"其他"单选按钮被选中，并隐藏相同的字段。

该方法在非IE浏览器上正确工作，但在IE上工作(几乎)相反…看起来IE会在取消选择选项时触发"change"事件，而不是在选择选项时触发。

这里是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>

从你得到你的例子的网站

但是我忘了说，互联网剥削者只能在您使用时这样做.click()代替。change()

为什么要将无线电组分配给html数组?Name ="selection" is fine…

您应该能够显示/隐藏其他文本框，如下所示:

<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'});
    }
});
(未测试)

相关文章：