Jeśli doszedłeś już do etapu kiedy to klonowanie elementów nie jest wiedzą tajemną i nie sprawnia Ci żadnych problemów, to być może przed kolejnym etapem natrafiłeś na inny problem.
Podczas kopiowania zaznaczonego elementu radio ten traci swoje zaznaczenie.
Dlaczego tak się dzieje?
Najzwyczajniej dlatego, że w grupie radio o tej samej nazwie nie może być zaznaczonych dwóch przycisków. Do tej sytuacji może dojść również w momencie kiedy klonujesz przyciski radio z zamiarem nadania im później innego atrybutu name. Mam tu na myśli sytuację opisaną w poście dotyczącym klonowania elementów formularza i nadawania im unikalnych atrybutów. Fakt, że zmienisz im nazwy później, nie spowoduje uniknięcia początkowo efektu, o którym piszę.
Jak dobrze "nastroić" radio?
Rozwiązanie jest proste. Musimy przed klonowaniem elementu lub grupy elementów zapamiętać, który z nich jest zaznaczony. Po sklonowaniu iterujemy po pętli wszystkie radio wraz z nowym i ustawiamy właściwość checked wcześniej zaznaczonemu.
<input type="radio" name="name">
<input type="radio" name="name">
<input type="radio" name="name">
<input type="radio" name="name" checked>
<button type="button">
Dodaj radio
</button>
+
document.querySelector('button').addEventListener('click', function() {
var checked = document.body.querySelector(':checked');
var cloned = document.body.querySelector('input[type="radio"]:last-of-type').cloneNode(true);
document.body.insertBefore(cloned, this);
document.body.querySelectorAll('input[type="radio"]').forEach(function(el) {
if (el === checked) {
el.checked = true;
}
});
});
A tak wygląda to w działaniu:
Jak zapewne dostrzegłeś, ostatni zaznaczony element pomimo klonowania nie traci swojej właściwości. Właściwości w znaczeniu zaznaczenia.
Przydatne linki:
Metoda cloneNode
Klonowanie elementów formularza