Html中使用自定義圖片來(lái)實(shí)現(xiàn)checkbox顯示的方法
發(fā)布時(shí)間:2016-10-18 09:10:38 作者:佚名
我要評(píng)論
下面小編就為大家?guī)?lái)一篇Html中使用自定義圖片來(lái)實(shí)現(xiàn)checkbox顯示的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
如果需要使用圖片來(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)容了,希望大家多多支持腳本之家~
相關(guān)文章

HTML5實(shí)現(xiàn)的自定義Checkbox和Radiobox 很酷的選中動(dòng)畫(huà)效果源碼
今天我們來(lái)利用HTML5和CSS3技術(shù)來(lái)自定義Checkbox和Radiobox的樣式,特別是Checkbox,在選中的時(shí)候還有非??岬倪x中動(dòng)畫(huà)2014-11-07
通過(guò)jQuery實(shí)現(xiàn)自定義可以替代html自帶的checkbox和radiobox
可以替代html自帶的單選框和復(fù)選框,用法和普通checkbox沒(méi)有什么區(qū)別2013-09-25CSS+HTML自定義checkbox效果的實(shí)例代碼
checkbox應(yīng)該是一個(gè)比較常用的html功能了,不過(guò)瀏覽器自帶的checkbox往往樣式不怎么好看,而且不同瀏覽器效果也不一樣.下文給大家分享CSS+HTML自定義checkbox效果,一起看2017-07-03



