Villkorsstyrda radiobuttons/checkboxes

15 september, 2006

Jag har ett formulär med följande utseende:

o Alternativ 1

H Alternativ 1:1

H Alternativ 1:2

o Alternativ 2

H Alternativ 2:1

H Alternativ 2:2

Teckenförklaring: o = radiobutton, H = checkbox

Jag skulle vilja att det funkar såhär:

Om radiobutton "Alternativ 1" klickas i så ska automatiskt checkboxarna "Alternativ 1:1" och "Alternativ 1:2" kryssas i.

Samma sak med radiobutton "Alternativ 2", då ska "Alternativ 2:1" och "Alternativ 2:2" kryssas i.

Jag har testat lite med onClick="if(this.checked)..." men jag är ganska dålig på javascript så det har varit fruktlösa försök.

Om det är någon som förstår vad jag är ute efter och som vet hur jag löser detta så hade det varit suveränt. Poäng utlovas! :thumbsup:

15 september, 2006

Borde fungera bra med något liknande för Alt 1:


onClick=" if(this.checked) { document.getElementById("checkbox1").checked = true; document.getElementById("checkbox2").checked = true; } "

[inlägget ändrat 2006-09-15 12:31:12 av Dev]

15 september, 2006

Om det är många kryssrutor som du vill förändra så skapa en funktion som tänder resp släcker dem olika kryssrutorna.

Du skickar bara in några parametrar i funktionen och sen kör du en for-sats och sätter kryssrutornas checked-värde till antingen true eller false.

Funktions-anropet:

<input type="Radio" name="ett" value="1" onclick="return(chkBox('tva','tre'));"><br />
<input type="Radio" name="ett" value="2" onclick="return(chkBox('tre','tva'));"><br />
<input type="Checkbox" name="tva" value="2_1"><br />
<input type="Checkbox" name="tva" value="2_2"><br />
<input type="Checkbox" name="tre" value="3_1"><br />
<input type="Checkbox" name="tre" value="3_2">

Om du använder en funktion kan du bara lägga till flera kryssrutor med samma namn utan att behöva ändra i onclick-händelsen.

15 september, 2006

Ja detta fungerar om man byter ut " mot ' innanför parenteserna.

Tackar! Poäng!

15 september, 2006

Detta låter intressant. Problemet är att jag inte är haj på att skapa funktioner. Men det är ju bra mycket snyggare att slippa ha så mycket kod i formulärtaggarna så har du möjlighet att snickra ihop något vore jag tacksam.

15 september, 2006

Hm... ibland är det bra att tänka innan man skriver

Fixade det såhär:

onClick=" if(this.checked) { document.getElementById('checkbox1_1').checked = true; document.getElementById('checkbox1_2').checked = true;
document.getElementById('checkbox2_1').checked = false; document.getElementById('checkbox2_2').checked = false; } "

----

Tidigare, ogenomtänkt inlägg...

Såg omedelbart en följdfråga... (såklart)

Låt säga jag väljer Alternativ 2, då kryssas Alt 2:1 & Alt 2:2 i som de ska. MEN om jag sedan väljer Alternativ 1, då vill jag att Alt 2:1 & Alt 2:2 släcks och Alt 1:1 & Alt 1:2 tänds.

Ska man använda onBlur då på något sätt?

Tack för hjälpen!! :thumbsup:

[inlägget ändrat 2006-09-15 13:34:36 av .mixon]

[inlägget ändrat 2006-09-15 15:12:05 av .mixon]

15 september, 2006

Eftersom det är fredag så kan jag väl bjuda på den

[log]

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" language="JavaScript">
function chkBox(oElms1,oElms2) {
var o1 = document.getElementsByName(oElms1);
var o2 = document.getElementsByName(oElms2);
for(i=0;i<o1.length;i++) {
 o1[i].checked=true;
}
for(i=0;i<o2.length;i++) {
 o2[i].checked=false;
}
}
</script>
</head>

<body>

<form>
<input type="Radio" name="ett" value="1" onclick="return(chkBox('tva','tre'));"><br />
<input type="Radio" name="ett" value="2" onclick="return(chkBox('tre','tva'));"><br />
<br />
<input type="Checkbox" name="tva" value="2_1"><br />
<input type="Checkbox" name="tva" value="2_2"><br />
<input type="Checkbox" name="tre" value="3_1"><br />
<input type="Checkbox" name="tre" value="3_2"><br />

</form>

</body>
</html>

[/log]

15 september, 2006

Ah, man tackar!

Trevlig helg!

25 september, 2006

Hm, stötte på ytterligare ett problem med de här radiobuttons/checkboxarna...

Om jag kryssar i Alternativ 2 (inkl. 2:1 och 2:2) först och sedan ångrar mig och vill välja Alternativ 1:2 istället, då måste ju hela Alternativ 2 släckas ner (sättas till false) och Alternativ 1 sättas till true (men inte Alternativ 1:1).

Hur i hela friden lyckas man med det?

Poäng utlovas till den som kan.

25 september, 2006

Ja, då blir det till att ändra om i funktionerna/anropen, om du nu använder det.

Följande gör nog det du tänker på:

[log]

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" language="JavaScript">
function chkBox(oElms1,oValue1,oValue2) {
var o1 = document.getElementsByName(oElms1);
 for(i=0;i<o1.length;i++) {
   if(o1[i].value==oValue1 || o1[i].value==oValue2) {
  o1[i].checked=true;
}
else {
  o1[i].checked=false;
}
 }
}

function selEnChkBox(oForm,oValue,oElm) {
var elms1 = document.getElementsByName(oForm);
var elms2 = document.getElementsByName(oElm);
 for(var z=0;z<elms2.length;z++) {
   elms2[z].checked=false;
 }
 for (var x=0;x<elms1.length;x++) {
   if(elms1[x].value==oValue) {
  elms1[x].checked=true;
}
else {
  elms1[x].checked=false;
}
 }
}
</script>
</head>

<body>

<form>
<input type="Radio" name="ett" value="1" onclick="return(chkBox('tva','1','2'));"><br />
<input type="Radio" name="ett" value="2" onclick="return(chkBox('tva','3','4'));"><br /><br />
<input type="Checkbox" name="tva" value="1" onclick="return(selEnChkBox('tva','1','ett'));"><br />
<input type="Checkbox" name="tva" value="2" onclick="return(selEnChkBox('tva','2','ett'));"><br />
<input type="Checkbox" name="tva" value="3" onclick="return(selEnChkBox('tva','3','ett'));"><br />
<input type="Checkbox" name="tva" value="4" onclick="return(selEnChkBox('tva','4','ett'));">
</form>
</body>
</html>

[/log]

Gjorde även så tidigare radioknappar avmarkeras om man bara väljer en kryssruta.

Som du ser så skickas det in en del parametrar till funktionerna, bara att läsa och lära

25 september, 2006

Tack för din tid! Jag ska sätta mig ner och lära mig detta så snart jag får lite tid över här...

Tack för hjälpen sålänge! :thumbsup:

13 december, 2006

Ja det är ju ett par månader sedan jag trixade med detta sist...

Ditt senaste exempel Micke_skane är nästan som jag hade tänkt mig...

Jag bifogar bild på hur mitt sökformulär ser ut. Nedan finns koden (strippad från allt utom just formuläret så det blir mera lättläst).

[log]<input id="SF_FIELD1" name="SF_FIELD1" type="text" value="" size="20"> <input type="submit" value="SÖK">

<label for="rm" title="RM"><input id="rm" name="rm" type="checkbox" value="1" checked="checked"> Licensbilder</label>

<label for="rf" title="RF"><input id="rf" name="rf" type="checkbox" value="1" checked="checked"> Royaltyfritt</label>

<label for="all" title="Alla arkiv"><input id="all" name="archive" type="radio" value="all" checked="checked" onClick="if(this.checked) {

document.getElementById('svenska').checked = false;

document.getElementById('genre').checked = false;

document.getElementById('historia').checked = false;

document.getElementById('personer').checked = false;

document.getElementById('mode').checked = false;

document.getElementById('reportage').checked = false;

} "> Alla arkiv</label>

<label for="kre" title="Kreativa arkivet"><input id="kre" name="archive" type="radio" value="kre" onClick="if(this.checked) {

document.getElementById('svenska').checked = true;

document.getElementById('genre').checked = true;

document.getElementById('historia').checked = false;

document.getElementById('personer').checked = false;

document.getElementById('mode').checked = false;

document.getElementById('reportage').checked = false;

} "> Kreativa arkivet</label>

<label for="svb" title="Svenska bilder"><input id="svb" name="svenska" type="checkbox" value="svb"> Svenska bilder</label>

<label for="genre" title="genre"><input id="genre" name="genre" type="checkbox" value="genre"> Genrebilder</label>

<input id="red" name="archive" type="radio" value="red" onClick="if(this.checked) {

document.getElementById('svenska').checked = false;

document.getElementById('genre').checked = false;

document.getElementById('historia').checked = true;

document.getElementById('personer').checked = true;

document.getElementById('mode').checked = true;

document.getElementById('reportage').checked = true;

} "> Redaktionella arkivet</label>

<label for="his" title="Historia & Kultur"><input id="his" name="historia" type="checkbox" value="5011"> Historia</label>

<label for="knd" title="Porträtt & Kungligt"><input id="knd" name="personer" type="checkbox" value="5007"> Kändisar</label>

<label for="rep" title="Reportage"><input id="rep" name="reportage" type="checkbox" value="5005"> Reportage</label>

[/log]

Följande är jag ute efter:

Om en användare har formuläret på bilden uppe och sedan kryssar i Historia, då ska radioknappen för det Redaktionella arkivet markeras tillsammans med kryssrutan för Historia.

Någon som vet hur man fixar det på ett smart sätt? Poäng utlovas såklart!

[bild bifogad 2006-12-13 10:20:39 av .mixon]

13 december, 2006

Vad skall hända med den andra radionknappen och de kryssrutor som är ifyllda? Radioknappar skall ju fungera exklusivt så om Historia markeras så bör ju ovanstående grupp avmarkeras. Är det verkligen så du tänkt dig det?

EDIT: Tittade tillbaka lite i historien och det verkar som det är så du tänkt dig det, har inte riktigt tid att se vad som redan gjorts.

[inlägget ändrat 2006-12-13 10:27:34 av Anjuna Moon]

13 december, 2006

De två översta kryssrutorna som är ikryssade "Licensbilder" och "Royaltyfritt" är inte med i den "dynamiska" delen under strecket.

Jag antar att du med "den andra radioknappen" menar "Alla arkiv", den ska förbli släckt. Du får se de tre radioknapparna som tre "sektioner" där underliggande kryssrutor är "undersektioner". Egentligen borde väl ALLA rutor kryssas i när "Alla arkiv" väljs men så ska det inte vara.

När "Historia" väljs så ska hela den "Kreativa" sektionen släckas och "Historiaknappen" markeras tillsammans med sin "översektion" - det "Redaktionella arkivet" ("Alla arkiv" som sagt inte heller markerat).

13 december, 2006

Ok, tror jag är med nu, återkommer strax med lite kod

13 december, 2006

Ok, jag började med att reda upp lite. Eftersom det i html-koden inte finns någon logisk gruppering av vilka kryssrutor som hör till vilken radioknapp (annat än en kronologisk ordning förstås) så definierade jag denna gruppering i scriptet. Denna använder jag sedan för att rensa tidigare vald grupp

Först scriptet:

[log]

<script>
var Sections=new Array();
Sections['all']=new Array()
Sections['kre']=new Array('svb','genre');
Sections['red']=new Array('his','knd','mod','rep');
var SelSection='all'; //Förvald
function SelectSection(sSection) {
   ClearSelectedSection();
   oSection=document.getElementById(sSection);
   oSection.checked=true;
   SelSection=sSection;
}

function ClearSelectedSection() {
   arrCB=Sections[selSection];
   for (i in arrCB) {
       o=document.getElementById(arrCB[i]);
       o.checked=false;
   }
}

</script>

[/log]och sedan har jag ändrat i din html (tog bort de gamla onclick och lade till nya)

[log]

<label for="all" title="Alla arkiv"><input id="all" name="archive" type="radio" value="all" checked="checked"> Alla arkiv</label>
<label for="kre" title="Kreativa arkivet"><input onclick="SelectSection('kre');" id="kre" name="archive" type="radio" value="kre"> Kreativa arkivet</label>

<label for="svb" title="Svenska bilder"><input onclick="SelectSection('kre');" id="svb" name="svenska" type="checkbox" value="svb"> Svenska bilder</label>
<label for="genre" title="genre"><input onclick="SelectSection('kre');" id="genre" name="genre" type="checkbox" value="genre"> Genrebilder</label>

<label for="red" title="Redaktionella arkivet">
<input onclick="SelectSection('red');" id="red" name="archive" type="radio" value="red"> Redaktionella arkivet</label>

<label for="his" title="Historia & Kultur"><input onclick="SelectSection('red');" id="his" name="historia" type="checkbox" value="5011"> Historia</label>
<label for="knd" title="Portr&auml;tt &amp; Kungligt"><input onclick="SelectSection('red');" id="knd" name="personer" type="checkbox" value="5007"> K&auml;ndisar</label>
<label for="mod" title="Mode"><input onclick="SelectSection('red');" id="mod" name="mode" type="checkbox" value="5005"> Mode</label>
<label for="rep" title="Reportage"><input onclick="SelectSection('red');" id="rep" name="reportage" type="checkbox" value="5005"> Reportage</label>

[/log]

13 december, 2006

Ja det är grymt bra Anjuna, "vi" närmar oss

Enda kruxet nu (vi utgår från att jag besöker sidan med formuläret så att "Alla arkiv" är valt (by default)) är om jag t.ex väljer att söka i det "Kreativa arkivet" genom att kryssa i radioknappen, då ska "Svenska bilder" och "Genrebilder" automatiskt också kryssas i. Skulle jag sen ångra mig så ska jag kunna kryssa ur t.ex. "Genrebilder", är du med?

Men annars är det precis så jag vill ha att fokus flyttas från en radioknapp (t.ex. "Kreativa arkivet") då jag klickar på en kryssruta under en annan huvudsektion (t.ex. "Mode" under "Redaktionella arkivet"). Precis som jag vill ha det! :thumbsup: Poäng!

Går det andra att fixa tror du?

[inlägget ändrat 2006-12-13 13:24:45 av .mixon]

13 december, 2006

Går det andra att fixa tror du?

Det både går och har fixats =)

Ändra funktionerna enligt:

function SelectSection(sSection,SelectSubSections) {
   ClearSelectedSection(false);
   oSection=document.getElementById(sSection);
   oSection.checked=true;
   SelSection=sSection;
   if(SelectSubSections) ClearSelectedSection(true);
}

function ClearSelectedSection(SetState) {
   arrCB=Sections[selSection];
   for (i in arrCB) {
       o=document.getElementById(arrCB[i]);
       o.checked=SetState;
   }
}

samt ändra i dina onclick enligt:

- För radioknapps-oncklick:arna ändra anropet till SelectSection('xxxxxx',true)

(där xxxxx är det som stod innan förstås)

- För kryssrutorna, ändra till SelectSection('kre',false)

That should do it!

13 december, 2006

Ajdå, fungerade inte exakt som det skall. Låt mig fixa...

13 december, 2006

Sådär, ändra första raden i SelectSection till:

   if (sSection!=SelSection) ClearSelectedSection(false);

13 december, 2006

Vad ska jag säga? Du är grym Anjuna! Det funkar klockrent (iaf i IE, hoppas på kompabilitet.. har man stängt av javascript får man skylla sig själv ).

Det enda jag saknade var en funktionskoppling på "Alla arkiv"-radioknappen... men det lyckades jag trolla dit själv (klipp o klistra)... tänka sig

Tusen tack för hjälpen! Poäng igen, såklart :thumbsup:

13 december, 2006

iaf i IE, hoppas på kompabilitet

Jag använder Firefox och där funkar det bra. Tack för poängen!

13 december, 2006

Låter bra (FF). Det är jag som ska tacka.

Villkorsstyrda radiobuttons/checkboxes

Rekommendera Poster

.mixon

Länk till kommentar

Dela på andra webbplatser

Dev

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

Anjuna Moon

Länk till kommentar

Dela på andra webbplatser

.mixon

Länk till kommentar

Dela på andra webbplatser

Arkiverat

Vem är online 0 Medlemmar, 0 anonym, 10 gäster (Visa hela listan)

Populära medlemmar

Publika meddelanden

Senaste som Tittar

Senaste inlägg

Forum

Aktivitet

pcforalla.se