Mrrrr's Forum (VIEW ONLY)
Un forum care ofera solutii pentru unele probleme legate in general de PC. Pe langa solutii, aici puteti gasi si alte lucruri interesante // A forum that offers solutions to some PC related issues. Besides these, here you can find more interesting stuff.
Lista Forumurilor Pe Tematici
Mrrrr's Forum (VIEW ONLY) | Reguli | Inregistrare | Login

POZE MRRRR'S FORUM (VIEW ONLY)

Nu sunteti logat.
Nou pe simpatie:
Dulci-k
Femeie
22 ani
Giurgiu
cauta Barbat
22 - 45 ani
Mrrrr's Forum (VIEW ONLY) / Tutoriale si Ghiduri Utile // Tutorials and useful guides / [HTA, javascript] Make Multiple Interdependent Radio Button Groups Moderat de TRaP, TonyTzu
Autor
Mesaj Pagini: 1
Mrrrr
AdMiN

Inregistrat: acum 17 ani
Postari: 2228
I created a HTA with several button groups as presented below (all are radio buttons):

Company G --------- Product A1000

---------------------- Product B1000
Company P --------- Product B2000
---------------------- Product B3000

---------------------- Product C1000 (XXX)
Company B --------- Product C2000 (XXX)
---------------------- Product C3000 (YYY)
---------------------- Product C4000 (YYY)

I needed the following premises (after selecting any Company and one of its corresponding products):
- if Company selection is changed, selection of any Product from the previously selected Company is cleared
- if Product selection is changed to another Product of another Company, the Company would be changed as well to the one whose Product was selected

Sample:



Now, I'm not really good with Javascript so this might be long for anyone knowing better Js, but it does the job.

The Js part located after the <head></head> section in HTML:


<script type="text/javascript">

function checkG() {
if (document.getElementById("G").checked = true) {
    document.getElementById("B1").checked = false;
    document.getElementById("B2").checked = false;
    document.getElementById("B3").checked = false;

    document.getElementById("C1").checked = false;
    document.getElementById("C2").checked = false;
    document.getElementById("C3").checked = false;
    document.getElementById("C4").checked = false;

}
}

function checkP() {
if (document.getElementById("P").checked = true) {
    document.getElementById("A1").checked = false;
    document.getElementById("C1").checked = false;
    document.getElementById("C2").checked = false;
    document.getElementById("C3").checked = false;
    document.getElementById("C4").checked = false;

}
}

function checkB() {
if (document.getElementById("B").checked = true) {
    document.getElementById("A1").checked = false;
    document.getElementById("B1").checked = false;
    document.getElementById("B2").checked = false;
    document.getElementById("B3").checked = false;

}
}

function checkG_A1() {
if (document.getElementById("A1").checked = true) {
    document.getElementById("G").checked = true;
    document.getElementById("P").checked = false;
    document.getElementById("B").checked = false;
    document.getElementById("B1").checked = false;
    document.getElementById("B2").checked = false;
    document.getElementById("B3").checked = false;

    document.getElementById("C1").checked = false;
    document.getElementById("C2").checked = false;
    document.getElementById("C3").checked = false;
    document.getElementById("C4").checked = false;

}
}

function checkP_B1() {
if (document.getElementById("B1").checked = true) {
    document.getElementById("P").checked = true;
    document.getElementById("G").checked = false;
    document.getElementById("B").checked = false;
    document.getElementById("A1").checked = false;
    document.getElementById("C1").checked = false;
    document.getElementById("C2").checked = false;
    document.getElementById("C3").checked = false;
    document.getElementById("C4").checked = false;

}
}

function checkP_B2() {
if (document.getElementById("B2").checked = true) {
    document.getElementById("P").checked = true;
    document.getElementById("G").checked = false;
    document.getElementById("B").checked = false;
    document.getElementById("A1").checked = false;
    document.getElementById("C1").checked = false;
    document.getElementById("C2").checked = false;
    document.getElementById("C3").checked = false;
    document.getElementById("C4").checked = false;

}
}

function checkP_B3() {
if (document.getElementById("B3").checked = true) {
    document.getElementById("P").checked = true;
    document.getElementById("G").checked = false;
    document.getElementById("B").checked = false;
    document.getElementById("A1").checked = false;
    document.getElementById("C1").checked = false;
    document.getElementById("C2").checked = false;
    document.getElementById("C3").checked = false;
    document.getElementById("C4").checked = false;

}
}

function checkB_C1() {
if (document.getElementById("C1").checked = true) {
    document.getElementById("B").checked = true;
    document.getElementById("G").checked = false;
    document.getElementById("P").checked = false;
    document.getElementById("A1").checked = false;
    document.getElementById("B1").checked = false;
    document.getElementById("B2").checked = false;
    document.getElementById("B3").checked = false;

}
}

function checkB_C2() {
if (document.getElementById("C2").checked = true) {
    document.getElementById("B").checked = true;
    document.getElementById("G").checked = false;
    document.getElementById("P").checked = false;
    document.getElementById("A1").checked = false;
    document.getElementById("B1").checked = false;
    document.getElementById("B2").checked = false;
    document.getElementById("B3").checked = false;

}
}

function checkB_C3() {
if (document.getElementById("C3").checked = true) {
    document.getElementById("B").checked = true;
    document.getElementById("G").checked = false;
    document.getElementById("P").checked = false;
    document.getElementById("A1").checked = false;
    document.getElementById("B1").checked = false;
    document.getElementById("B2").checked = false;
    document.getElementById("B3").checked = false;

}
}

function checkB_C4() {
if (document.getElementById("C4").checked = true) {
    document.getElementById("B").checked = true;
    document.getElementById("G").checked = false;
    document.getElementById("P").checked = false;
    document.getElementById("A1").checked = false;
    document.getElementById("B1").checked = false;
    document.getElementById("B2").checked = false;
    document.getElementById("B3").checked = false;

}
}
</script>


The HTML part located in the <body></body> section in HTML:


<table style="width:77.5%;">
    <tr>
        <td style="text-align:left;">
            <input type="radio" name="Select_E" value="1" id="G" onClick=checkG() style="background-color=magenta;"> G
        </td>
        <td style="text-align:right;">
            <input type="radio" name="Select_F" value="1" id="A1" onClick=checkG_A1() style="background-color=magenta;"> A1000<br>
        </td>
    </tr>
</table>

<table style="width:77.5%;"> <!--  border: 1px solid black -->
    <tr>
        <td style="text-align:left;">
            <input type="radio" name="Select_E" value="2" id="P" onClick=checkP() style="background-color=blue;"> P
        </td>
        <td style="text-align:right;">
            <input type="radio" name="Select_F" value="2" id="B1" onClick=checkP_B1() style="background-color=blue;"> B1000<br>
            <input type="radio" name="Select_F" value="3" id="B2" onClick=checkP_B2() style="background-color=blue;"> B2000<br>
            <input type="radio" name="Select_F" value="4" id="B3" onClick=checkP_B3() style="background-color=blue;"> B3000
        </td>
    </tr>
</table>

<table style="width:92.9%;">
    <tr>
        <td style="text-align:left;" rowspan="2">
            <input type="radio" name="Select_E" value="3" id="B" onClick=checkB() style="background-color=lime;"> B
        </td>
        <td style="text-align:right;">
            <input type="radio" name="Select_F" value="5" id="C1" onClick=checkB_C1() style="background-color=lime;"> C1000 (XXX)<br>
            <input type="radio" name="Select_F" value="6" id="C2" onClick=checkB_C2() style="background-color=lime;"> C2000 (XXX)
        </td>
    </tr>

    <tr>
        <td style="text-align:right;">
            <input type="radio" name="Select_F" value="7" id="C3" onClick=checkB_C3() style="background-color=lime;"> C3000 (YYY)<br>
            <input type="radio" name="Select_F" value="8" id="C4" onClick=checkB_C4() style="background-color=lime;"> C4000 (YYY)
        </td>
    </tr>
</table>


_______________________________________


pus acum 1 an
   
Mrrrr
AdMiN

Inregistrat: acum 17 ani
Postari: 2228
Edited title to add: javascript

_______________________________________


pus acum 1 an
   
Pagini: 1  

Mergi la