AttachEvent не работает на IE11

Question

Я пытаюсь сделать два флажка, из которых только один может быть выбран в любой момент времени. Я много раз искал форумы и нашел несколько предложений.

if (document.attachEvent){ 
// For IE Browsers. 
document.attachEvent("DOMContentLoaded", function (event) { 

    var saSelector = document.querySelector('input[name=saWrite]'); 
    var cgSelector = document.querySelector('input[name=cgWrite]'); 

    if (cgSelector !== null) { 
     cgSelector.attachEvent('change', function (event) { 
      if (cgSelector.checked) { 
       document.querySelector('input[name=saWrite]').checked = false; 
      } 
     }); 
    } 

    if (saSelector !== null) { 
     saSelector.attachEvent('change', function (event) { 
      if (saSelector.checked) { 
       document.querySelector('input[name=cgWrite]').checked = false; 
      } 
     }); 
    }  
}); 
} 

Я написал аналогичную функцию с addEventListener вместо attachEvent для браузеров, отличных от IE. Это работает в Firefox. Но этот метод как-то не работает для IE. Я здесь что-то не так? Любые предложения будут полезны. Я бы хотел использовать JQuery для этого. Но я не могу.

Answer 1

https://jsfiddle.net/20g7ym8q/

Вы говорите, что вы хотите использовать JQuery, но вы не можете. Я начинаю понимать, что может показаться реальным ограничением, но это не так. Все, что вы можете сделать с JQuery, вы можете сделать с помощью JavaScript.

Ваш код не будет работать в IE11, потому что attachEvent устарел и удален в пользу принятия addEventListener в качестве стандартного способа присоединения события во всех современных браузерах. Если вы ищете поддержку поколений без JQuery и без дублирования кода, настройка вашего собственного объекта для использования в качестве промежуточного уровня между вашим кодом и браузером, вероятно, является лучшим способом для этого.

function $(ele) { 
    return { 
    ele: document.querySelector(ele), 
    on: function(ev, fn) { 
     (document.attachEvent) ? 
     this.ele.attachEvent(ev, fn) : 
     this.ele.addEventListener(ev, fn); 
    }, 
    checked: function(change) { 
    if(typeof change !== undefined) this.ele.checked = change; 
    return this.ele.checked; 
    } 
    } 
} 

Вышеупомянутая функция, которая возвращает объект с двумя методами и свойством. Он работает аналогично JQuery для знакомства и согласованности, но без накладных расходов, включая всю библиотеку JQuery.

Методы позволяют добавлять событие с использованием .on с типом события и функцией в качестве параметров. Эти методы также позволяют установить или получить свойство checked указанного элемента. .checked() будет просто возвращать логическое значение для того, будет ли флажок установлен, .checked(boolean) установит свойство элементов в желаемое состояние.

На практике, чтобы решить дилемму только один допустимый флажок, вы можете сделать это:

var sa = $('input[name="saWrite"]'); 
var cg = $('input[name="cgWrite"]'); 

cg.on('click', function(ev) { 
    sa.checked(false) 
}); 

sa.on('click', function(ev) { 
    cg.checked(false); 
});