Html中使用自定义图片来实现checkbox显示的方法

2019-10-26 17:19:55

字体：大中小

来源：转载

供稿：网友

如果需要使用图片来实现checkbox的使用，可以使用来实现，实现原理是将label表签代替checkbox的显示，将checkbox的display设置为none,在label标签中使用要显示的图片img，再使用js函数去控制图片的选中与否的切换。

JavaScript Code复制内容到剪贴板

</label> <input type="checkbox" style="display:none" id="agree" checked="checked">

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>

以上就是小编为大家带来的Html中使用自定义图片来实现checkbox显示的方法全部内容了，希望大家多多支持武林站长站~

学习交流

电脑开不了机的原因和解决办法

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

2019-10-23 09:17:05

2019-10-21 09:20:02

2019-10-21 09:00:12

2019-09-26 08:57:12

2019-09-25 08:46:36

2019-09-25 08:15:43

疑难解答

图片精选

网友关注