En checkbox som skjuler de ikke-valgte checkboxe?

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>

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

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?

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?

softspot:

Det er absolut en ide! Den prøver jeg lige at lege med ...

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>

Spot on, Rune1983! Det var lige præcist, hvad vi søgte! Tusind tak for hjælpen!

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?