funkcja z formularzem i zmienną

Cześć,
Mam taki formularz:

<DIV id=srodek> 
	
	<form method="post"  name="takietam">
    <div id="ST">
	<table border="0" align="center" cellpadding="4" cellspacing="4">
        <tr> 
          <td><input type="checkbox" name="ST_A" value="ON" onclick="st_radio();" > dostęp do A</td>
          <td><input type="radio" name="ST_A_R" value="o" disabled> opcja o</td>
          <td><input type="radio" name="ST_A_R" value="k" disabled> opcja k</td>
        </tr>
        <tr> 
          <td><input type="checkbox" name="ST_B" value="ON" onclick="st_rad('B')" > dostęp do B</td>
		  <td><input type="radio" name="ST_B_R" value="o" disabled> opcja o</td>
          <td><input type="radio" name="ST_B_R" value="k" disabled> opcja k</td>
        </tr>
		        <tr> 
          <td><input type="checkbox" name="ST_C" value="ON"> dostęp do C</td>
          <td><input type="radio" name="ST_C_R" value="o" disabled> opcja o</td>
          <td><input type="radio" name="ST_C_R" value="k" disabled> opcja k</td>
        </tr>
		        <tr> 
          <td><input type="checkbox" name="ST_D" value="ON"> dostęp do D</td>
          <td><input type="radio" name="ST_D_R" value="o" disabled> opcja o</td>
          <td><input type="radio" name="ST_D_R" value="k" disabled> opcja k</td>
        </tr> 
    </table>
    </div>
    </form>
  </DIV>

W którym chcę, aby aktywność dwóch opcji radio zależała od checkboxa, który je poprzedza.
Udało mi się to zrobić "na sztywno" (część A) za pomocą funkcji st_radio(), ale nie chciałbym tworzyć kolejnych niemal takich samych funkcji tylko chciałabym wywoływać taka funkcję z parametrem. Tyle tylko że coś robię źle (czyżby typ zmiennych?) i funkcja st_rad(zmienna) nie działa jakbym sobie tego życzyła.

	function st_radio()
	{
		var checkbox = document.forms[0].ST_A;
		var sta = document.forms[0].ST_A_R;
		
		if(checkbox.checked) {
			for (var i = 0; i < sta.length; i++) {
			sta[i].disabled = false;	}
		} 
		else {
			for (var i = 0; i < sta.length; i++) {
			sta[i].disabled = true;
			sta[i].checked = false;			};
		}
	}

	function st_rad(zmienna)
	{ 
		var p = 'ST_'+zmienna;
		var radi = 'ST_'+zmienna+'_R';

		alert (zmienna);
		alert (p);
		alert (radi);

		/*var checkboxr = document.getElementById(p);
		alert (checkboxr); */
		
		var checkboxr = document.forms[0].p;
		alert (checkboxr); 
		
		var STc = document.forms[0].radi;
		alert (STc); 

		if(checkboxr.checked) {
			for (var i = 0; i < STc.length; i++) {
			STc[i].disabled = false;	}
		} 
		else {
			for (var i = 0; i < STc.length; i++) {
			STc[i].disabled = true;
			STc[i].checked = false;	};
		}	
	}

Pierwsze trzy alerty wyświetlają właściwy ciąg znaków, natowmiast alert (checkboxr) i alert (STc) wyśiwetlają "undefined".
Zaznaczam że te alerty nie są mi do niczego potrzebne oprócz sprawdzania działania funkcji ;)
Bardzo proszę o pomoc :)

Nie wiem skąd wziąłeś to .p oraz .radi, ale nie tak się to robi.

Dopisz sobie pod tymi altertami taki kod

console.log(document.forms[0]);

W konsoli developerskiej zobaczysz wszystko czego potrzebujesz :)

TomRiddle napisał(a):

Nie wiem skąd wziąłeś to .p oraz .radi, ale nie tak się to robi.

To napisz mi proszę jak, bo właśnie nie wiem ;) A zaznaczam, że zanim wysłałam tego posta sprawdziłam różne opcje których już tutaj nie przytoczę, ale żadna nie była właściwa.
Informacja zwrócona przez konsole" SCRIPT5007: Nie można pobrać właściwości „checked” dla niezdefiniowanego lub pustego odwołania" też mi nie pomaga bo to że jest źle wiem, ale nie wiem jak zrobić żeby było dobrze ;)

Vesna77 napisał(a):

TomRiddle napisał(a):

Nie wiem skąd wziąłeś to .p oraz .radi, ale nie tak się to robi.

To napisz mi proszę jak, bo właśnie nie wiem ;) A zaznaczam, że zanim wysłałam tego posta sprawdziłam różne opcje których już tutaj nie przytoczę, ale żadna nie była właściwa.

Myślałem że dam Ci wędkę, i Cię nakieruję.

Otóż sposobów żeby dobrać się do jakiś elementów (takich jak <input/> u Ciebie) jest kilka, najpopularniejszymi jest document.getElementById(), ale z document.forms[0] (jeśli faktycznie formularz jest pierwszy od góry) też jest okej. API do obsługi modelu DOM w JS, jest tak zbudowane, że elementy (np <input name="foo"/>) są reprezentowane w obiekcie form (jednym forms, np forms[0]) właśnie pod name tego obiektu.

Więc jeśli wsadzisz do formularza input <input type="check" name="test"/>, to powinieneś się do niego odnieść document.forms[0].test.

@TomRiddle: ależ ja lubię wędki tylko w tym momencie właśnie brakuje mi pomysłu jak się nia posłużyć ;)
Jak widzisz w pierwszej funkcji st_radio() sposób o którym piszesz już znam. Problemem dla mnie jest to że ja chcę aby ten "test" się zmieniał zgodnie z parametrem z którym wywołam funkcję :)
document.getElementById() też już próbowałam co nawet widać w linii 26 która zapomniałam usunąć zanim przekopiowałam tutaj treść ;)

Vesna77 napisał(a):

Problemem dla mnie jest to że ja chcę aby ten "test" się zmieniał zgodnie z parametrem z którym wywołam funkcję :)

Jesli chcesz żeby kilka elementów na raz było zablokowanych, to może lepiej byłoby użyć klasy?

<form>
  <input class="one"/>
  <input class="one"/>
  <input class="one"/>
  <input class="two"/>
  <input class="two"/>
  <input class="two"/>
</form>

function disableMany(className) {
  const elements = document.getElementsByClassName(className);
  for (let key in elements) {
    if (elements.hasOwnProperty(key)) {
      const element = elements[key];
      // tutaj zrób z nim co chcesz, np element.disabled = true;
    }
  }
}

I możesz tego użyć tak

disableMany("one"); // blockuje te o klasie "one"
disableMany("two"); // blockuje te o klasie "two"

Ok, a da się bez klas?

Vesna77 napisał(a):

Ok, a da się bez klas?

Da się, możesz ustawić różne id lub różne name dla elementów, np a1, a2, a3 dla jednych, i np b1, b2 i b3 dla innych, ale to będzie się wiazało z tym że te id i name będą różne, podczas gdy z klasami byłoby to ta sama nazwa.

Ale oczywiście z id i name może zrobić to samo - tylko pamiętaj że te name oraz id muszą być unikatowe dla każdego elementu.

TomRiddle napisał(a):

Jesli chcesz żeby kilka elementów na raz było zablokowanych, to może lepiej byłoby użyć klasy?
function disableMany(className) {

Spróbowałam użyć tej funkcji którą mi tutaj napisałeś:

	function disableMany(className) {
 const elements = document.getElementsByClassName(className);  //SCRIPT1002: Błąd składni
  for (let key in elements) {
    if (elements.hasOwnProperty(key)) {
      const element = elements[key];
      // tutaj zrób z nim co chcesz, np 
	  element.disabled = true;
    }
  }
}

z wywołaniem:

  <td><input type="checkbox" name="ST_C" value="ON" onclick="disableMany('C');"> dostęp do C</td> //Wartość właściwości „disableMany” jest pusta lub niezdefiniowana, nie jest obiektem Function

I mam takie komunikaty jak wyżej zaznaczyłam.
Przepraszam, jesli moje pytania wydają się głupie i trywialne, a ja leniwa, ale ja dopiero raczkuje w temacie i to co zapewne dla Was jest łatwe i od razu widoczne dla mnie jest często czarną magią...

Już nieaktualne. Znalazłam to czego szukałam :)

Zamiast

var checkboxr = document.forms[0].p;

Miało być

var checkboxr = document.forms[0].elements[p];

i analogicznie do zmiennej radi :)

Vesna77 napisał(a):

TomRiddle napisał(a):

Jesli chcesz żeby kilka elementów na raz było zablokowanych, to może lepiej byłoby użyć klasy?
function disableMany(className) {

Spróbowałam użyć tej funkcji którą mi tutaj napisałeś:

	function disableMany(className) {
 const elements = document.getElementsByClassName(className);  //SCRIPT1002: Błąd składni

być może wynikało to z tego że użyłem const, zamiast var, a Ty uruchomiłeś to na środowisku ES5?

Zamień const na var i będzie ok.

TomRiddle napisał(a):

Zamień const na var i będzie ok.

Witam ponownie w tym wątku ;) Tym razem wracam nie z problemem (a miałam już taką ochotę kilka razy ;)) ale z rozwiązaniem problemu. Taki post "ku pamięci" i może przyda się innym zielonym którzy tutaj trafią :)
Po długiej przerwie pojawiły się kolejne formularze do obsłużenia i tym razem douczyłam się również w zakresie class . Ponieważ w jednym z formularzy, checkboxów które aktywowały inne checkboxy było naprawdę dużo, za radą @TomRiddle obsłużyłam je właśnie za pomocą klas:

	function unblocked(className) 
	{
		var main = document.forms[0].elements[className];
		var pola = document.getElementsByClassName(className);
	
		for (var i = 0; i < pola.length; i++) {
		
		if (main.checked) {
			pola[i].disabled = false;	}
		else {
			pola[i].disabled = true;
			pola[i].checked = false;	};
		}	
	}

i wszystko działało jak w bajce z tym, że na Firefox. W IE nie bo nie. W konsoli ( :) ) błąd "SCRIPT438: Obiekt nie obsługuje właściwości lub metody „getElementsByClassName”". Po poszukiwaniu w googlach odkryłam, że problemem był używany znak "_" w nazwie klasy. Za radą googla
Zastąpiłam:

var pola = document.getElementsByClassName(className);

poleceniem:

var pola = document.querySelectorAll('.'+className);

i działa :)

PS. Nadal wiem, że nic nie wiem i się uczę ;)

Polecam:
document.querySelector()
Można nim łapać tagi, klasy, idy, złożone selektory typu: DIV > SPAN:first-child itp.
I jak ci się koncepcja zmienia to nie musisz za każdym razem zmieniać metody łapania, tylko sam selektor :)