Avatar billede thomasmyg Nybegynder
16. juli 2007 - 21:14 Der er 8 kommentarer og
1 løsning

js med radiobutton og checkbox

jeg har en side og man skal lave nogle valg.

http://hilsoetest.hilsoe.dk/bestilsub.asp kan man se to radio'er og 2 check's under hver radio.

hvis man vælger asp skal ms radioen automatisk blive "on" hvis man vælger og skifte til php skal ms radioen blive "off" og open radioen skal blive "on".

et eksempel mere.

hvis man vælger mssql skal asp checkboxen vinges af og ms radioen skal blive "on", beslutter man sig for mysql istedet skal ms blive "off" og begge flueben under ms skal væk.

Håber det er til og forstå.
Avatar billede mclemens Nybegynder
17. juli 2007 - 09:26 #1
Sådan her ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
x={"asp":"php","php":"asp"};
function rev(e){
  e2=document.getElementById(x[e.value]+"db");
  e2.checked=e.selected;
  e2.disabled=!e.selected;
  document.getElementById(e.value+"db").disabled=false;
}
</script>

</head><body>
MS-teknologi:<br>
<input type="radio" name="sys" value="asp" onclick="rev(this)" onchange="rev(this)"> ASP<br>
<input type="checkbox" name="db" id="aspdb" value="mssql"> MSSQL<br>
<br>
OPEN-teknologi:<br>
<input type="radio" name="sys" value="php" onclick="rev(this)" onchange="rev(this)"> PHP<br>
<input type="checkbox" name="db" id="phpdb" value="mysql"> MYSQL<br>
</body></html>
Avatar billede thomasmyg Nybegynder
17. juli 2007 - 09:34 #2
har du lyst til at give lidt forklaring? Det er foerste gang jeg selv roder med JS og det ser lidt maerkeligt ud i forhold til det jeg saa paa W3school.com.
Avatar billede mclemens Nybegynder
17. juli 2007 - 09:42 #3
onchange samt onclick laver et opkald til funktionen ved
ændring af valg og sender en forbindelse til elementet med.

e2=document.getElementById(x[e.value]+"db");
skaber forbindelse til den modsatte teknologi's checkbox
via elementets value og objectet x som indeholder modsatte
tekststrenge.

  e2.checked=e.selected;
  e2.disabled=!e.selected;
Det modsatte element checkes og disables efter om selve
elementet man klikkede (og fra valgte) er valgt eller ej.

document.getElementById(e.value+"db").disabled=false;
DB elementet der hører til den nyligt valgte aktiveres igen.

17/07-2007 09:26:30 kan også skrives som:
(bemærk ingen onchange og uden object men med
ekstra tekststreng i kaldet til funktionen).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function rev(e,e2){
  e2=document.getElementById(e2);
  e2.checked=e.selected;
  e2.disabled=!e.selected;
  document.getElementById(e.value+"db").disabled=false;
}
</script>

</head><body>
MS-teknologi:<br>
<input type="radio" name="sys" value="asp" onclick="rev(this,'phpdb')"> ASP<br>
<input type="checkbox" name="db" id="aspdb" value="mssql"> MSSQL<br>
<br>
OPEN-teknologi:<br>
<input type="radio" name="sys" value="php" onclick="rev(this,'aspdb')"> PHP<br>
<input type="checkbox" name="db" id="phpdb" value="mysql"> MYSQL<br>
</body></html>
Avatar billede thomasmyg Nybegynder
17. juli 2007 - 10:53 #4
ok tak for det, men jeg sser lige at du ikke har lavet den magen til det jeg har paa min side (se linket i mit spoergsmaal).
Jeg har en radiobutton og saa to checkboxe og saa igen en radiobutton og to checkboxe.
Avatar billede mclemens Nybegynder
17. juli 2007 - 13:06 #5
Sådan :)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
x={"asp":[0,"tek-asp","tek-mssql"],"php":[1,"tek-php","tek-mysql"]};
function rev(e,e2){
  for(i=0;i<x[e].length;i++){
    if(i==0)document.getElementsByName("tek")[x[e][i]].checked=false;
    if(i>0)document.getElementsByName(x[e][i])[0].checked=false;
  }
  document.getElementsByName("tek")[x[e2][0]].checked=true;
}
</script>

</head><body>


<p><input id="myCheck" name="tek" type="radio" onclick="rev('php','asp')" /> MS teknologi<br />
<img src="billeder/sqltilvalg.gif" border="0" style="height:20px; width:20px;" /><input id="myCheck" name="tek-asp" tabindex="4" type="checkbox" value="1" onclick="rev('php','asp')" /> asp/.NET<br />
<img src="billeder/sqltilvalg.gif" border="0" style="height:20px; width:20px;" /><input name="tek-mssql" tabindex="5" type="checkbox" value="1" onclick="rev('php','asp')" /> msSQL</p>

<p><input type="radio" name="tek" onclick="rev('asp','php')" /> Open Source teknologi<br />
<img src="billeder/sqltilvalg.gif" border="0" style="height:20px; width:20px;" /><input name="tek-php" tabindex="6" type="checkbox" value="1" onclick="rev('asp','php')" /> php<br />
<img src="billeder/sqltilvalg.gif" border="0" style="height:20px; width:20px;" /><input name="tek-mysql" tabindex="7" type="checkbox" value="1" onclick="rev('asp','php')" /> mySQL</p>




</body></html>
Avatar billede thomasmyg Nybegynder
17. juli 2007 - 16:54 #6
det ser rigtig godt ud, jeg har dog lige en ting jeg gerne vil ha' lavet om.

hvis man fx vælger msSQL så skal asp/.NET også vælges samtidig med MS teknologi og det samme med open source.
Avatar billede mclemens Nybegynder
17. juli 2007 - 17:32 #7
Egentlig af den årsag jeg lavede de to første anderledes.
- Jeg følte at den ekstra radio på ms teknologi / open source var
overflødig da man normalt ikke vil sælge en af de to uden asp eller php.


... Her er den med autokryds af den ekstra checkbox:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
x={"asp":[0,"tek-asp","tek-mssql"],"php":[1,"tek-php","tek-mysql"]};
function rev(e,e2){
  for(i=0;i<x[e].length;i++){
    if(i==0)document.getElementsByName("tek")[x[e][i]].checked=false;
    if(i>0)document.getElementsByName(x[e][i])[0].checked=false;
  }
  document.getElementsByName("tek")[x[e2][0]].checked=true;
  document.getElementsByName(x[e2][1])[0].checked=true;
}
</script>

</head><body>


<p><input id="myCheck" name="tek" type="radio" onclick="rev('php','asp')" /> MS teknologi<br />
<img src="billeder/sqltilvalg.gif" border="0" style="height:20px; width:20px;" /><input id="myCheck" name="tek-asp" tabindex="4" type="checkbox" value="1" onclick="rev('php','asp')" /> asp/.NET<br />
<img src="billeder/sqltilvalg.gif" border="0" style="height:20px; width:20px;" /><input name="tek-mssql" tabindex="5" type="checkbox" value="1" onclick="rev('php','asp')" /> msSQL</p>

<p><input type="radio" name="tek" onclick="rev('asp','php')" /> Open Source teknologi<br />
<img src="billeder/sqltilvalg.gif" border="0" style="height:20px; width:20px;" /><input name="tek-php" tabindex="6" type="checkbox" value="1" onclick="rev('asp','php')" /> php<br />
<img src="billeder/sqltilvalg.gif" border="0" style="height:20px; width:20px;" /><input name="tek-mysql" tabindex="7" type="checkbox" value="1" onclick="rev('asp','php')" /> mySQL</p>



</body></html>
Avatar billede thomasmyg Nybegynder
17. juli 2007 - 17:35 #8
ja takker mangen gange.
Avatar billede mclemens Nybegynder
17. juli 2007 - 18:05 #9
Velbekomme, og mange tak for point :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester