Jednoczesne zaznaczanie elementów typu radio

0

Mam taką sytuację: są cztery elementy typu radio, które chcę tak oprogramować, żeby przy zaznaczeniu pierwszego zaznaczał się jeden ze wskazanych do pary (i odwrotnie) oraz chcę zrobić to samo z drugą parą. Póki co mam tak:

function parametry() {
	var ltr = document.getElementById("ltr");
	var gal = document.getElementById("gal");
	var km = document.getElementById("km");
	var mil = document.getElementById("mil");
	
	if (ltr.checked == true) {
		km.checked = true;
	} else {
		mil.checked = true;
	}
}

Działa to tak, że jak wcisnę element radio z id ltr, to zaznacza się ten z id km + id ltr (to jest OK), jeśli zaznaczę ten z id gal, to zaznacza się korespondujący z nim element z id mil + id gal. I teraz chodzi mi o to, aby można było naprzemiennie zaznaczać albo radio z id ltr lub km -> wtedy zaznaczają się oba jednocześnie, niezależnie od tego, który nacisnę jako pierwszy) oraz analogicznie w przypadku pary gal/mil. Po prostu w dowolnym momencie przełączamy się między parami, niezależnie który element wybiorę jako pierwszy z danej pary.

0

OK, chyba sobie poradziłem, tylko nie wiem, czy jest to rozwiązanie eleganckie. Działa, ale wszelkie sugestie mile widziane. Rozdzieliłem to na dwie osobne funkcje: jedna dotyczy parametrów odnośnie paliwa, druga parametrów odnośnie dystansu. Wygląda to tak:

function parametry_paliwo() {
	var ltr = document.getElementById("ltr");	
	var km = document.getElementById("km");	
	var mil = document.getElementById("mil");
	
	if (ltr.checked == true) {
		km.checked = true;		
	} else {		
		mil.checked = true;
	}
}

function parametry_dystans() {
	var ltr = document.getElementById("ltr");
	var gal = document.getElementById("gal");
	var km = document.getElementById("km");
	
	if (km.checked == true) {
		ltr.checked = true;
	} else {
		gal.checked = true;
	}
}

HTML:

<input type="radio" name="paliwo" value="litry" id="ltr" onclick="parametry_paliwo()">Litry
<input type="radio" name="paliwo" value="galony" id="gal" onclick="parametry_paliwo()">Galony

<input type="radio" name="dystans" value="kilometry" id="km" onclick="parametry_dystans()">Kilometry
<input type="radio" name="dystans" value="mile" id="mil" onclick="parametry_dystans()">Mile
0

Najpierw kilka uwag do kodu:

  1. W JS panuje panuje konwencja camelCase, więc dobrze jest się jej trzymać.
  2. Staraj się nazywać rzeczy po ang.
  3. 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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1