jquery 用image图片自定义checkbox 并切换状态

最新推荐文章于 2022-12-29 12:54:39 发布

Tmac_我爱特雷西

最新推荐文章于 2022-12-29 12:54:39 发布

阅读量2.3k

点赞数 1

分类专栏： html web开发

本文链接：https://blog.csdn.net/qq_34983989/article/details/79283275

版权

html web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍如何在HTML中不使用系统默认的checkbox，而是利用jQuery和自定义图片来创建一个别具一格的checkbox切换效果。通过结合HTML、CSS和JavaScript，实现了更加美观的交互体验。

摘要由CSDN通过智能技术生成

html中，input标签一般和lable标签一起使用，不用系统原生的checkbox，用自己的图片来自定义一个checkbox

html代码：

 <label>
         <img src="../images/ic_check_select.png" id="checkimg" onclick="checkclick()"/>
 </label>

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

js代码：

function checkclick(){
        var checkimg = document.getElementById("checkimg");
        if($("#agree").prop('checked') ){
            $("#agree").prop("checked",false);
            console.log("111111");
            checkimg.src="../images/ic_check_nomal.png";
            checkimg.alt="未选";
        } else{
            $("#agree").prop("checked",true);
            console.log("22222");
            checkimg.src="../images/ic_check_select.png";
            checkimg.alt="选中";
        }
    }