How to implement checkbox method on images in Html

This time I will show you how to implement the checkbox method on pictures in Html. What are the precautions for implementing the checkbox method on pictures in Html? The following is a practical case, let's take a look.

If you need to use pictures to implement the use of checkbox, you can use to implement it. The implementation principle is to replace the display of the checkbox with the label table, set the

display of the checkbox to none, and set the label label to none Use the image img to be displayed, and then use the js function to control whether the image is selected or not.

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use h5’s sse server to send EventSource events

H5’s local storage and local database details Introduce

#How to call the APP function in the H5 page

The above is the detailed content of How to implement checkbox method on images in Html. For more information, please follow other related articles on the PHP Chinese website!