Najpierw kilka uwag do kodu:
- W JS panuje panuje konwencja camelCase, więc dobrze jest się jej trzymać.
- Staraj się nazywać rzeczy po ang.
- Nie używaj atrybutów onclick, onchange itp. Używanie ich wymaga zdefiniowania funkcji przed elementami html. Lepiej jest zrobić tak:
var ltr = document.getElementById("ltr");
ltr.addEventListener('click', parametry_paliwo);
Co do samego rozwiązania można się pokusić o to, żeby zrobić je bardziej uniwersalne. Możemy w tym celu wykorzystać atrybut data-*
.
<input type="radio" name="paliwo" value="litre" id="ltr" data-related="km">Litry
<input type="radio" name="paliwo" value="gallon" id="gal" data-related="mil">Galony
<input type="radio" name="distance" value="kilometre" id="km" data-related="ltr">Kilometry
<input type="radio" name="distance" value="mile" id="mil" data-related="gal">Mile
Każdy element wie jaki jest element z nim powiązany. data-related
zawiera ID powiązanego elementu.
// pobieramy wszystkie elementy, które mają atrybut data-related
var elements = document.querySelectorAll('[data-related]');
// elements nie zawiera tablicy, tylko coś co się nazywa NodeList.
// My chcemy użyć funckji forEach, więc musimy stworzyć tablice z tej listy
// zrobienie [...elements] pozwala nam stworzyć tablicę elementów
// ... to spread operator, mozesz wiecej o nim poczytac
[...elements].forEach(function(element) {
// dla każdego elementu, który ma ten atrybut dodajemy
// funkcję, która zajmie się zaznaczaniem powiązanych elementów
element.addEventListener('change', handleChange);
});
function handleChange(e) {
var changedElement = e.target,
relatedId = changedElement.dataset.related, // pobieramy ID powiązanego elementu
related = document.getElementById(relatedId); // wyszukujemy ten element
// i ustawiamy wartosc powiazanego elementu na taką, jaka obecenie ma nasz element ktory został zmieniony
// jezeli go zaznaczymy to powiazany sie zaznaczy
// jezeli go odznaczymy to powiaany rowniez sie odznaczy
related.checked = changedElement.checked;
}
Tu masz JSFiddle
Teraz jeżeli chcesz dodać jeszcze 50 innych inputów, to w JS już nie musisz nic ruszac. Wystarczy, że w HTML zdefiniujesz - używając data-related
- które elementy są ze sobą powiązane i voila :) Nie musisz robić osobnej funkcji dla każdej pary elementów.