Odczyt zaznaczonego przycisku radiowego

Treść zadania

W formularzu znajduje się grupa przycisków radiowych:

<input type="radio" name="rozmiar" value="M"> M
<input type="radio" name="rozmiar" value="L" checked> L
<input type="radio" name="rozmiar" value="XL"> XL

oraz przycisk <button id="btnWybierz">Zatwierdź rozmiar</button> i akapit <p id="wybranyRozmiar"></p>. Po kliknięciu przycisku pobierz zaznaczony radio za pomocą selektora CSS input[name="rozmiar"]:checked w document.querySelector() i wpisz do akapitu tekst: Wybrany rozmiar: L.

Co będzie oceniane

Zastosowanie selektora input[name='rozmiar']:checked w querySelector.
Wpisanie komunikatu Wybrany rozmiar: L do akapitu.
Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.

Testy automatyczne (1)

Odczytanie zaznaczonego rozmiaru L — tekst #wybranyRozmiar = Wybrany rozmiar: L

Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.

// Pobierz zaznaczony radio i wstaw jego wartość do #wybranyRozmiar

Wskazówki

Wskazówka 1

Pseudoklasa CSS :checked pozwala bezpośrednio wybrać ten element z grupy, który ma zaznaczoną kropkę.

Wskazówka 2

Użyj metody document.querySelector() z selektorem atrybutu i pseudoklasą, odczytaj właściwość value znalezionego elementu i wyświetl w akapicie.