jquery实现点击图片切换为另一图片,再次点击恢复到原图片

最新推荐文章于 2022-11-10 08:56:30 发布

原创最新推荐文章于 2022-11-10 08:56:30 发布 · 1.3w 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery

前端笔记专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的记住密码功能。通过点击复选框，用户可以选择是否记住密码，这一过程通过改变图片源来视觉反馈。此功能在登录界面常见，提高用户体验。

html代码：

<div class="detailpwd">
    <div class="remempwd" >
        <img id="remcheckbox" src="../images/remempwd1.png" />
            记住密码</div>
    <div class="forgetpwd">忘记密码?</div>
</div>

js代码：

//记住密码复选框点击切换
var toggle = true;
$("#remcheckbox").click(function() {
	if (toggle) {
		$("img").attr("src", "../images/remempwd2.png")
		toggle = false;
	} else {
		$("img").attr("src", "../images/remempwd1.png")
		toggle = true;
	}
});