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

时间：2021-05-08

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

JavaScript Code复制内容到剪贴板
  • <labelfor="agree">
  • <imgclass="checkbox"alt="选中"src="../img/checked.png"id="checkimg"onclick="checkclick();">
  • </label>
  • <inputtype="checkbox"style="display:none"id="agree"checked="checked">
  • <script>
  • functioncheckclick(){
  • varcheckimg=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显示的方法全部内容了，希望大家多多支持~

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章