So implementieren Sie die Kontrollkästchenmethode für Bilder in HTML

Dieses Mal zeige ich Ihnen, wie Sie die Checkbox-Methode für Bilder in HTML implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Checkbox-Methode für Bilder in HTML?

Wenn Sie Bilder verwenden müssen, um die Verwendung von Kontrollkästchen zu implementieren, können Sie diese verwenden. Das Prinzip der Implementierung besteht darin, die Anzeige des Kontrollkästchens durch die Beschriftungstabelle zu ersetzen und die

Anzeige festzulegen des Kontrollkästchens auf „Keine“ und setzen Sie die Beschriftung label Verwenden Sie das anzuzeigende Bild img und verwenden Sie dann die js-Funktion, um zu steuern, ob das Bild ausgewählt ist oder nicht.

<label  for="agree" >              
        <img  class="checkbox" alt="选中" src="../img/checked.png" id="checkimg" onclick="checkclick();">   
     </label>      
     <input type="checkbox"  style="display:none" id="agree" checked="checked">   
     <script>   
         function checkclick(){   
            var checkimg = document.getElementById("checkimg");   
            if($("#agree").is(&#39;:checked&#39;) ){   
                $("#agree").attr("checked","unchecked");   
                checkimg.src="../img/unchecked.png";   
                checkimg.alt="未选";   
            } else{   
                $("#agree").attr("checked","checked");   
                checkimg.src="../img/checked.png";   
                checkimg.alt="选中";   
            }   
        }   
    </script>

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie den SSE-Server von h5 zum Senden von EventSource-Ereignissen

Details zum lokalen Speicher und zur lokalen Datenbank von H5 Vorstellung

So rufen Sie APP-Funktionen auf der H5-Seite auf

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kontrollkästchenmethode für Bilder in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!