Avatar billede ulricho Novice
25. maj 2020 - 18:10 Der er 7 kommentarer og
1 løsning

En checkbox som skjuler de ikke-valgte checkboxe?

Jeg har en masse billeder listet op, hvor der til hver billede er en checkbox.

Jeg er nu gået død i, hvordan jeg allernederst i opbygningen, kan trykke på en checkbox, som så skjuler alle de <div> med id, som ikke er checket af. Hvordan er det lige, at jeg gør det smartest?

<div>
    <div id="billede1">
        <table>
            <tbody>
                <tr>
                    <td><img src="billede2.jpg" /></td>
                </tr>
                <tr>
                    <td><label class="container-check">Billede 1<input checked="checked" type="checkbox" id="myCheckDer" /> <span class="checkmark"></span><br />standard</label></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="billede2">
        <table>
            <tbody>
                <tr>
                    <td><img src="Billede1.jpg" /></td>
                </tr>
                <tr>
                    <td><label class="container-check">Billede 2<input type="checkbox" id="myCheckDer" /> <span class="checkmark"></span></label></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
Avatar billede ulricho Novice
25. maj 2020 - 18:13 #1
Jeg har pt. gang i dette script, men det virker ikke rigtigt. Og det er ikke smart, når der er mange billeder i min oplistning ...

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true) {
        text.style.display = "block";
      } else {
        text.style.display = "none";
      }
}
</script>
Avatar billede softspot Forsker
25. maj 2020 - 20:02 #2
Du må ikke give to (eller flere) elementer på samme side, det samme id.

Anvend class i stedet og find så dem alle med document.getElementsByClassName. Denne liste kan du så iterere over og skjule dem der ikke er checked.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Avatar billede Slater Ekspert
25. maj 2020 - 20:02 #3
Den skal jeg vist lige have uddybet.

De checkboxes er jo inde i div'erne. Dvs. hvis du skjuler de div'er der har en checkbox der ikke er checked, hvad er så pointen med checkboxes i det hele taget? Så kan du jo aldrig se en unchecked checkbox.

Dit forsøg på et script leder efter noget med id "text", men det findes ikke i dit html.

Kan du ikke forklare lidt bedre hvad du ønsker skal ske?
Avatar billede ulricho Novice
26. maj 2020 - 17:18 #4
Slater:

Ja, jeg forsøgte nok bare at fortælle det på den lette måde, MEN ...

Princippet er, at man har en indkøbsliste, hvor der er mange ting at vælge imellem. Når man så har krydset alt det af i checkboxene, som man skal bruge, kan man nederst på siden, krydse en checkbox af, som slukker for alle de <div>'ere, som ikke er brugt.

Du har helt ret i, at id="text" ikke er i mit html. Jeg har slettet alt fnidderen, da det ikke rigtig virker.

Hvilket princip er mon det rigtige her?
Avatar billede ulricho Novice
26. maj 2020 - 17:20 #5
softspot:

Det er absolut en ide! Den prøver jeg lige at lege med ...
Avatar billede Rune1983 Ekspert
27. maj 2020 - 07:36 #6
Prøv se dette eksempel.
<?php
$ScriptData = "";
for ($i=0; $i < 50; $i++) {
    ?>
    <div style="width: 100%; float: left; margin-bottom: 10px;" id="idDivBillede<?php print $i; ?>">
        <div style="width: 100%;">idDivBillede<?php print $i; ?></div>
        <div style="width: 100%;"><input type="checkbox" id="idCheckBoxBillede<?php print $i; ?>" value="1" /></div>
    </div>
    <?php
    $ScriptData .= "if( ( document.getElementById('idCheckBoxBillede$i').checked ) && ( document.getElementById('idCheckBoxVisValgte').checked ) ){ ";
        $ScriptData .= "document.getElementById('idDivBillede$i').style.display='block'; ";
    $ScriptData .= "} else { ";
        $ScriptData .= "if( document.getElementById('idCheckBoxVisValgte').checked ){ ";
            $ScriptData .= "document.getElementById('idDivBillede$i').style.display='none'; ";
        $ScriptData .= "} else { ";
            $ScriptData .= "document.getElementById('idDivBillede$i').style.display='block'; ";
        $ScriptData .= "} ";
    $ScriptData .= "} ";
}
?>
<div style="width: 100%; float: left; margin-bottom: 10px;">
    <div style="width: 100%;">Vis valgte checkbokse</div>
    <div style="width: 100%;"><input type="checkbox" id="idCheckBoxVisValgte" onclick="VisValgteCheckbokse();" value="1" /></div>
</div>
<script>
    function VisValgteCheckbokse(){
        <?php print $ScriptData; ?>
    }
</script>
Avatar billede ulricho Novice
27. maj 2020 - 09:09 #7
Spot on, Rune1983! Det var lige præcist, hvad vi søgte! Tusind tak for hjælpen!
Avatar billede ulricho Novice
27. maj 2020 - 15:41 #8
Hej igen Rune1983

Jeg har nu lagt den rigtig kode ind på vores Joomla-hjemmeside som en artikel. Imidlertid slettet den PHP-koden.

Har du en smart måde at håndtere det på? Ligge det ud i en separat fil?
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