How to use custom pictures to display checkbox in Html

The following editor will bring you an article on how to use custom images in Html to display checkboxes. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look.

If you need to use pictures to implement the use of checkbox, you can use it. The implementation principle is to replace the display of the checkbox with the label table, and set the display of the checkbox to none. Use the image img to be displayed in the label tag, and then use the js function to control whether the image is selected or not.

JavaScript CodeCopy content to clipboard

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

The above is a small The editor has brought you all the methods of using custom pictures to display checkboxes in Html. I hope you will support the PHP Chinese website~

More methods of using custom pictures to display checkboxes in Html For related articles, please pay attention to the PHP Chinese website!