下面小編就為大家帶來一篇Html中使用自訂圖片來實現checkbox顯示的方法。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧
如果需要使用圖片來實現checkbox的使用，可以使用來實現，實現原理是將label表簽代替checkbox的顯示，將checkbox的display設置為none,在label標籤中使用要顯示的圖片img，再使用js函數去控制圖片的選取與否的切換。
JavaScript 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>以上就是小編為所有內容帶來的Htmlcheck了PHP中文網~
更多Html中使用自訂圖片來實現checkbox顯示的方法相關文章請關注PHP中文網！
