Comment utiliser des images personnalisées pour afficher la case à cocher en HTML

L'éditeur suivant vous proposera un article sur la façon d'utiliser des images personnalisées en HTML pour afficher des cases à cocher. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil.

Si vous avez besoin d'utiliser des images pour implémenter l'utilisation de la case à cocher, vous pouvez l'utiliser. Le principe d'implémentation est de remplacer l'affichage de la case à cocher par le tableau des étiquettes, et définissez l'affichage de la case à cocher sur aucun. Utilisez l'image img à afficher dans la balise d'étiquette, puis utilisez la fonction js pour contrôler si l'image est sélectionnée ou non.

Code JavaScriptCopier le contenu dans le presse-papiers

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

Au-dessus de ceci est toute la méthode d'utilisation d'images personnalisées en HTML pour afficher les cases à cocher présentée par l'éditeur. J'espère que vous prendrez en charge le site Web PHP chinois ~

Plus d'images personnalisées sont utilisées en HTML pour afficher les cases à cocher Pour les articles liés. Pour les méthodes, veuillez faire attention au site Web PHP chinois !