Autor Zpráva
regvac
Profil *
Ahoj,
potřebuji poradit se skriptem, ve kterém kontroluji elementy, následně přisazuji hodnotu k proměnným a následně provádím nějaká nastavení. V dokumentu je ke kontrole mnoho údajů s různými id.

Stávající skript:
d = document.getElementById('i0'); if (d) {if (d.checked) {p0 = true;} else {p0 = false;}}
d = document.getElementById('i1'); if (d) {if (d.checked) {p1 = true;} else {p1 = false;}}
...

Zamýšlená úprava přibližně takto:
var idecka = new Array ('i0','i1','i2',.........);
var nazvy_prom = new Array ('p0','p1','p2',........);//názvy proměnných pro příslušná idecka, nevím, jak je zapsat, aby se staly proměnnými. p0 odpovídá i0, p1 odpovídá i1,...
for (i = 0; i < idecka.length; i++) {
  d = document.getElementById(idecka[i]); 
  if (d) {if (d.checked) {nazev_id_dle_aktualniho_i = true;} else {nazev_id_dle_aktualniho_i = false;}} //pro i = 0 by se přiřazovalo true nebo false do proměnné p0, pro i1 do p1 atd...
}

A následuje pak další skript, který provádí různá přenastavení elementů:
if (p0) {
  d = document.getElementById('k1'); if (d) {d.checked = 'checked';}
  d = document.getElementById('k2a'); if (d) {d.checked = 'checked';}  
  d = document.getElementById('k2b'); if (d) {d.checked = 'checked';}  
  d = document.getElementById('k3'); if (d) {d.checked = '';}  
  d = document.getElementById('k1'); if (d) {d.disabled = 'disabled';}  
  d = document.getElementById('k3'); if (d) {d.disabled = '';}
}
if (p1) {
  d = document.getElementById('k1'); if (d) {d.checked = '';}
  d = document.getElementById('k2a'); if (d) {d.checked = '';}  
  d = document.getElementById('k3'); if (d) {d.checked = '';}  
  d = document.getElementById('k1'); if (d) {d.disabled = '';}  
  d = document.getElementById('k3'); if (d) {d.disabled = '';}
}
...

a který by se mi také hodilo zjednodušit, například tak, že by to, co se má kontrolovat bylo zapsáno v polích nějak takto:
var nastaveni[pro p0, je-li true] = new Array ('c-k1','c-k2a','c-k2b','h-k3','d-k1','e-k3');//výpis potřebných nastavení, kde první písmeno je zkratka pro (c je checked = 'checked',h je checked = '',d je disabled = 'disabled',e je disabled= '') a zbytek je id příslušného elementu, který se má tímto přenastavit
var nastaveni[pro p1, je-li true] = new Array ('h-k1','h-k2a','h-k3','e-k1','e-k3');

Lze toto vše nebo alespoň část nějak zautomatizovat, zjednodušit, zuniverzálnit?

Díky
Joker
Profil
regvac:
Možná by to chtělo ten návrh vidět ještě z obecnější perspektivy, třeba by se našlo nějaké jiné jednodušší řešení.
V každém případě:
var nazvy_prom = new Array ('p0','p1','p2',........);//
Tohle pole je zbytečné, když máte pole, nepotřebujete už ten seznam proměnných. Můžete to navázat na stejný index jako to první pole (tj. když idecka[0] je i0, tak třeba hodnoty[0] bude jestli je checked), nebo to udělat jako asociativní pole (hodnoty["i0"] = jestli je i0 checked)
regvac
Profil *
Zkusím to tedy zobecnit, o co mi jde. Mám formulář s inputy radio a checkboxy(každý má své id) a každý po zaškrtnutí či vybrání ovlivňuje (checkuje,disabluje a naopak) jiné dané inputy. V podstatě mi jde o to mít tabulku(y) (či pole), kam zapisuju, co má co ovlivnit a jak, aby to bylo přehlednější, kratší, jednodušší, univerzálnější a abych lépe dokázal uhlídat případné chyby....

Jen pro představu inputů mám zatím asi 600 a každý ovlivňuje průměrně 5-10 jiných.

Jak tedy na to co nejlépe?

Děkuji
joe
Profil
regvac:
Jen pro představu inputů mám zatím asi 600 a každý ovlivňuje průměrně 5-10 jiných.
To znamená, že změny budeš provádět až při vybrání / zaškrtnutí některého inputu a jen na některých ostatních budeš provádět změnu na základě aktuální hodnoty inputu, kde došlo k akci uživatele. Není tedy třeba procházet pokaždé všechny inputy for (i = 0; i < idecka.length; i++) {

Pokud bych psal univerzální řešení, například bych si definoval závislosti u každého inputu, například v podobě JSON v datovém atributu data-json, které by mohly vypadat nějak takto:

{
  "checked": {
    "id_elementu": hodnota,
    "id_elementu_2": hodnota,
    "id_elementu_3": hodnota
  },
  
  "unchecked": {
    "id_elementu": hodnota,
    "id_elementu_2": hodnota,
    "id_elementu_3": hodnota
  }
}

Řešení je určitě více.
peta
Profil
Ja na te puvodni verzi nevidim nic spatneho.
<form>
<input type="checkbox" id="i0" checked="checked"/>
<input type="checkbox" id="k1"/>
<input type="checkbox" id="k2a"/>
<input type="checkbox" id="k2b"/>
<input type="checkbox" id="k3"/>
</form>

<script>
function obj(id) {return document.getElementById(id);}
id = 'i0';
if (obj(id) && obj(id).checked) {
arr = {
k1:{'checked':true,'disabled':true},    //kdyby ti to nefungovalo bez uvozovek, tak si je dopln i pro ostatni
k2a:{checked:true},
k2b:{checked:true},
k3:{checked:true,disabled:true}
};
for (i in arr)
for (j in arr[i])
obj(i)[j] = arr[i][j] ? j : '';
}
</script>
_es
Profil
peta:
obj(i)[j] = arr[i][j] ? j : '';
To je zas čo za *****? Vlastnosť checked má hodnotu true alebo false. Okrem toho si nedáš vysvetliť, že je vhodné definovať premenné cez var.
regvac
Profil *
Doplnil jsem to podle rady peta takto:
<form>
<input type="checkbox" id="i0" onclick="change(this.id)">i0
<input type="checkbox" id="k1" onclick="change(this.id)">k1
<input type="checkbox" id="k2a">k2a
<input type="checkbox" id="k2b">k2b
<input type="checkbox" id="k3">k3
</form>
 
<script> 
//arr pro i0 checked true              
arr1 = {
  k1:{checked:true,disabled:true},
  k2a:{checked:true},
  k2b:{checked:true},
  k3:{checked:true,disabled:true}
};     
//arr pro i0 checked false            
arr0 = {
  k1:{disabled:false},
  k2b:{checked:false},
  k3:{disabled:false}
};        
/*
příklad arr pro změnu k1    
arr1 = {i0:{checked:false,disabled:false}}; //arr pro k1 checked true           
arr0 = {k3:{disabled:false}}; //arr pro k1 checked false   
*/  
function obj(id) {return document.getElementById(id);}
function change(id) { 
  if (obj(id) && obj(id).checked) {
    for (i in arr1) {
      for (j in arr1[i]) {obj(i)[j] = arr1[i][j] ? j : '';}
    }
  }
  else {   
    for (i in arr0) {
      for (j in arr0[i]) {obj(i)[j] = arr0[i][j] ? j : '';}
    }
  }
}     
</script>
Mám k tomu další dotazy:
1)Jak pojmenovat či zapsat další arr, které potřebuji pro další id, nejen pro i0, ale pro všechny ostatní, aby pak funkce change pracovala s hodnotami patřícími k příslušnému id?
2)Zápis arr by byl lepší nějak ve tvaru cca dle poznámky od Joe, protože by byl výrazně kratší a přehlednější, tzn.
arr1 = {
  checked:{k1,k2a,k2b,k3}, 
  disabled:{k1,k3}
};      
arr0 = {
  unchecked:{k2b}, 
  enabled:{k1,k3}
};
Jak upravit obsah funkce change či zápis v arr?

Díky
_es
Profil
peta:
a pouzivam dtd, kde mi hlasi jediny spravny zapis pro checked a to checked="checked"
Ale ty to nepriraďuješ v HTML ale v JS a tá vlastnosť má v JS hodnotu buď true alebo false - nič iné - ľahko si to overíš, keď ju v JS prečítaš. Ale to si sa mohol za vyše 3 rokov už naučiť: Zmena value v input-e

In HTML:
Áno „v HTML“, nie v JS.

Ten kod mi FF spusti a funguje
Lebo prevod prázdneho textového reťazca do typu Boolean je false a neprázdneho true.
peta
Profil
Příklady formulářových polí
Cituji:
Zaškrtávací čtvereček (zaškrtnutý):
<input type="checkbox" name="ctverecek" checked="checked">

Formuláře » input
Cituji:
Tři přepínací tečky (radio buttony), první vybraná:
<input type="radio" name="stejne_jmeno" value="první" checked="checked">
_es
Profil
peta:
Cituji:
Ak kde máš v tej „citácii“ JS kód?
regvac
Profil *
Co říkáte na toto "funkční" řešení?
<form>
<input type="checkbox" id="i0" onclick="change(this.id)">i0
<input type="checkbox" id="k1" onclick="change(this.id)">k1
<input type="checkbox" id="k2a">k2a
<input type="checkbox" id="k2b">k2b
<input type="checkbox" id="k3">k3
</form>
 
<script> 
var arr_i0 = [ 
['k1','k2a','k2b','k3'],[],['k1','k3'],[],//checked true,checked false,disabled true,disabled false pro checked id
[''],['k1','k2a','k2b','k3'],[],['k1','k3']//checked true,checked false,disabled true,disabled false pro unchecked id
];  
var arr_k1 = [ 
['i0','k2b'],[],['i0','k2b'],[],
[],['i0'],[],['i0']
];
function obj(id) {return document.getElementById(id);}
function change(id) { 
  var d;         
  var arr = window["arr_"+id];
  if (obj(id) && obj(id).checked) {
    for (i = 0; i <= arr[0].length; i++) {d = obj(arr[0][i]); if (d) {d.checked = 'checked';}}   
    for (i = 0; i <= arr[1].length; i++) {d = obj(arr[1][i]); if (d) {d.checked = '';}}   
    for (i = 0; i <= arr[2].length; i++) {d = obj(arr[2][i]); if (d) {d.disabled = 'disabled';}}   
    for (i = 0; i <= arr[3].length; i++) {d = obj(arr[3][i]); if (d) {d.disabled = '';}}   
  }
  else {   
    for (i = 0; i <= arr[4].length; i++) {d = obj(arr[4][i]); if (d) {d.checked = 'checked';}}   
    for (i = 0; i <= arr[5].length; i++) {d = obj(arr[5][i]); if (d) {d.checked = '';}}   
    for (i = 0; i <= arr[6].length; i++) {d = obj(arr[6][i]); if (d) {d.disabled = 'disabled';}}   
    for (i = 0; i <= arr[7].length; i++) {d = obj(arr[7][i]); if (d) {d.disabled = '';}}   
  }
}     
</script>
_es
Profil
regvac:
Co říkáte na toto "funkční" řešení?

onclick="change(this.id)"
Je nepraktické posielať funkcii id elementu a z toho id v tej funkcii zisťovať objekt elementu, keď je ten objekt v this.

d.checked = 'checked'; d.checked = ''; d.disabled = 'disabled'; d.disabled = '';
Vlastnosti checked a disabled majú hodnoty len true alebo false, viď aj dokumentácia: developer.mozilla.org/en-US/docs/DOM/HTMLInputElement

var arr = window["arr_"+id];
Podobným výrazom sa vyhýnaj, používaj premenné, či objekty, nejako normálnejšie.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0