Html中使用自定義圖片來實現(xiàn)checkbox表現(xiàn)的方法

假如必要使用圖片來實現(xiàn)checkbox的使用，可以使用來實現(xiàn)，實現(xiàn)原理是將label表簽代替checkbox的表現(xiàn)，將checkbox的display設置為none,在label標簽中使用要表現(xiàn)的圖片img，再使用js函數(shù)去控制圖片的選中與否的切換。

&#106avascript Code復制內容到剪貼板

<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(':checked') ){   
               $("#agree").attr("checked","unchecked");   
                 checkimg.src="../img/unchecked.png";   
                 checkimg.alt="未選";   
              } else{   
                 $("#agree").attr("checked","checked");   
                 checkimg.src="../img/checked.png";   
                 checkimg.alt="選中";   
        }   
    }   
</script>

以上就是小編為大家?guī)淼腍tml中使用自定義圖片來實現(xiàn)checkbox表現(xiàn)的方法悉數(shù)內容了，盼望大家多多支持圖趣網~