• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Html中使用自定义图片来实现checkbox显示的方法

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

    JavaScript Code复制内容到剪贴板
    1. <label  for="agree" >              
    2.         <img  class="checkbox" alt="选中" src="../img/checked.png" id="checkimg" onclick="checkclick();">   
    3.      </label>      
    4.      <input type="checkbox"  style="display:none" id="agree" checked="checked">   
    5.      <script>   
    6.          function checkclick(){   
    7.             var checkimg = document.getElementById("checkimg");   
    8.             if($("#agree").is(':checked') ){   
    9.                 $("#agree").attr("checked","unchecked");   
    10.                 checkimg.src="../img/unchecked.png";   
    11.                 checkimg.alt="未选";   
    12.             } else{   
    13.                 $("#agree").attr("checked","checked");   
    14.                 checkimg.src="../img/checked.png";   
    15.                 checkimg.alt="选中";   
    16.             }   
    17.         }   
    18.     </script>  

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

    上一篇：浅谈HTML的语义化和一些简单优化
    下一篇：web响应式布局中iframe自适应的方法
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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