Html中使用自定義圖片來(lái)實(shí)現(xiàn)checkbox顯示的方法

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：CSS/HTML|點(diǎn)擊：次

如果需要使用圖片來(lái)實(shí)現(xiàn)checkbox的使用，可以使用來(lái)實(shí)現(xiàn)，實(shí)現(xiàn)原理是將label表簽代替checkbox的顯示，將checkbox的display設(shè)置為none,在label標(biāo)簽中使用要顯示的圖片img，再使用js函數(shù)去控制圖片的選中與否的切換。

JavaScript Code復(fù)制內(nèi)容到剪貼板

<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ī)?lái)的Html中使用自定義圖片來(lái)實(shí)現(xiàn)checkbox顯示的方法全部?jī)?nèi)容了，希望大家多多支持我們~

上一篇：HTML圖片img標(biāo)簽

欄目：CSS/HTML

下一篇：基于HTML實(shí)現(xiàn)多圖上傳預(yù)覽功能

本文標(biāo)題：Html中使用自定義圖片來(lái)實(shí)現(xiàn)checkbox顯示的方法

本文地址：http://www.jygsgssxh.com/a1/CSS_HTML/9568.html

更多CSS/HTML

雷火电竞-中国电竞赛事及体育赛事平台

CSS/HTML

Html中使用自定義圖片來(lái)實(shí)現(xiàn)checkbox顯示的方法

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀