首页 > 解决方案 > 单选按钮在 IE 中不切换

问题描述

嗨,我有一组单选选项,默认情况下,第一个选项具有“当前选择”类。

现在,当我单击其他选项时,我需要从所有其他单选选项中删除“当前选择”类并将其添加为当前选择的选项。

这是我正在使用的 JS,它在除 IE 之外的所有浏览器上都能正常工作。在 IE 上,所有其他选项都“当前已选择”并且没有被切换。

这是结构。

<div id="edit-donation-amount"><div class="js-form-item form-item js-form-type-radio form-item-donation-amount js-form-item-donation-amount">
        <input data-drupal-selector="edit-donation-amount-25" type="radio" id="edit-donation-amount-25" name="donation_amount" value="25" checked="checked" class="form-radio">

        <label for="edit-donation-amount-25" class="option">$25</label>
      </div>
<div class="js-form-item form-item js-form-type-radio form-item-donation-amount js-form-item-donation-amount">
        <input data-drupal-selector="edit-donation-amount-50" type="radio" id="edit-donation-amount-50" name="donation_amount" value="50" class="form-radio">

        <label for="edit-donation-amount-50" class="option">$50</label>
      </div>
<div class="js-form-item form-item js-form-type-radio form-item-donation-amount js-form-item-donation-amount currently-selected">
        <input data-drupal-selector="edit-donation-amount-100" type="radio" id="edit-donation-amount-100" name="donation_amount" value="100" class="form-radio">

        <label for="edit-donation-amount-100" class="option">$100</label>
      </div>
<div class="js-form-item form-item js-form-type-radio form-item-donation-amount js-form-item-donation-amount">
        <input data-drupal-selector="edit-donation-amount-500" type="radio" id="edit-donation-amount-500" name="donation_amount" value="500" class="form-radio">

        <label for="edit-donation-amount-500" class="option">$500</label>
      </div>
<div class="js-form-item form-item js-form-type-radio form-item-donation-amount js-form-item-donation-amount">
        <input data-drupal-selector="edit-donation-amount-1000" type="radio" id="edit-donation-amount-1000" name="donation_amount" value="1000" class="form-radio">

        <label for="edit-donation-amount-1000" class="option">$1000</label>
      </div>
<div class="js-form-item form-item js-form-type-radio form-item-donation-amount js-form-item-donation-amount">
        <input data-drupal-selector="edit-donation-amount-other" type="radio" id="edit-donation-amount-other" name="donation_amount" value="other" class="form-radio">

        <label for="edit-donation-amount-other" class="option">Other</label>
      </div>
</div>

var $radioButtons = $('#edit-donation-amount input[type="radio"]');
            $radioButtons.click(function() {
                $radioButtons.each(function() {
                    $(this).parent().toggleClass('currently-selected', this.checked);
                });
            });

下图中的 IE 问题: 捐赠2

任何关于它为什么在 IE 上失败的线索将不胜感激。

谢谢

标签: javascriptradio-buttonradioradio-group

解决方案


推荐阅读