Comment implémenter la méthode des cases à cocher sur les images en HTML

Cette fois, je vais vous montrer comment implémenter la méthode checkbox sur les images en HTML. Quelles sont les précautions pour implémenter la méthode checkbox sur les images en HTML ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Si vous avez besoin d'utiliser des images pour implémenter l'utilisation de la case à cocher, vous pouvez l'utiliser. Le principe de mise en œuvre est de remplacer l'affichage de la case à cocher par le tableau des étiquettes, de définir l'

affichage de. cochez la case sur aucun et définissez l'étiquette label Utiliser l'image img à afficher, puis utilisez la fonction js pour contrôler si l'image est sélectionnée ou non.

<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>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser le serveur sse de h5 pour envoyer des événements EventSource

Le stockage local de H5 et les détails de la base de données locale Présenter

Comment appeler les fonctions APP dans la page H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!