IE Problem :checked bei Attributwechsel per JS

[bobby]

Moin,

Der Titel klingt sperrig. ich hab folgendes Problem. Ich möchte eine Art Karusell erstellen das automatisch wechselt.

Dazu folgende Struktur

<div id="karusell">
  <input type="radio" name="img1" checked = "checked"><div><img .... > </div>
  <input type="radio" name="img2"><div><img .... > </div>
  <input type="radio" name="img3"><div><img .... > </div>
</div>

usw.

Ich lasse nun übe rein Intervall folgende Operationen ausführen:

1. ich wähle das nächste Input-Element
2. alle Elemente durchgehen und entferne das Attribut "checked"
3. ich setze das Attribut auf checked beim nächsten Element

var nextElement = document.querySelector('#karusell input:checked ~ input')
var allpictures = Array.from(document.querySelectorAll('#karusell input'));
allpictures.forEach(function(pic) {
    pic.removeAttribute('checked');
});
nextElement.setAttribute('checked','checked');

Alle Browser verstehen das, nur der IE 11 nicht (evtl. auch der IE 10). Der IE findet einfach das "neu gecheckte" Element nicht. Ich habe das gegen geprüft. Indem ich das Element ausgegeben habe (per for Iteration) und dabei das Attribut gecheckt habe. Das Element ist mit entsprechenden Attribut vorhanden. Wenn ich dieses aber wie oben beschrieben versuche zu selektieren, findet es der IE nicht. Ich hoffe das war soweit verständlich. Wo könnte mein Fehler liegen?

PS: ich will Vanilla JS verwenden und der IE 11 soll schon unterstützt werden

Gruß Bobby