Html怎样对图片实现checkbox方法

来源：动视网责编：小采时间：2020-11-27 15:27:10

Html怎样对图片实现checkbox方法

Html怎样对图片实现checkbox方法:这次给大家带来Html怎样对图片实现checkbox方法，Html对图片实现checkbox方法的注意事项有哪些，下面就是实战案例，一起来看一下。如果需要使用图片来实现checkbox的使用，可以使用来实现，实现原理是将label表签代替checkbox的显示，将checkbo

推荐度：

点击下载本文 文档为doc格式

导读Html怎样对图片实现checkbox方法:这次给大家带来Html怎样对图片实现checkbox方法，Html对图片实现checkbox方法的注意事项有哪些，下面就是实战案例，一起来看一下。如果需要使用图片来实现checkbox的使用，可以使用来实现，实现原理是将label表签代替checkbox的显示，将checkbo

这次给大家带来Html怎样对图片实现checkbox方法，Html对图片实现checkbox方法的注意事项有哪些，下面就是实战案例，一起来看一下。

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

<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>

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Html怎样对图片实现checkbox方法

推荐度：

点击下载本文 文档为doc格式

标签：图片方法如何实现

热门焦点

Html怎样对图片实现checkbox方法

Html怎样对图片实现checkbox方法

Html怎样对图片实现checkbox方法

最新推荐

猜你喜欢

热门推荐