轻松实现jQuery添加删除按钮Click事件_网络技术

轻松实现jQuery添加删除按钮Click事件

发布时间 - 2026-01-11 00:09:14 点击率：次

大家登陆一些网站或论坛时，经常会被要求先浏览和确认“用户协议”。“用户协议”底部通常会设置一个“我已阅读并同意”复选框，勾选了该复选框，“登陆”按钮才可用。

如下图所示，勾选“I have read and accept.”复选框，Login按钮才会相应click事件，登陆成功后切换到欢迎画面。

通常情况我们是怎么实现的呢，很多同学会想到用javascript设置按钮的disabled属性。这当然是一种不错的方法，不过我们用JQuery的话，代码会更简洁，同时我们的逼格也上去了，哈哈。

对于按钮来说，JQuery提供了bind()方法和unbind()方法，使我们可以随时随地，根据需要给按钮添加或删除Click事件。

详细代码如下：

<html>

<style type="text/css">
.hide {
  display: none;
}

.show {
  display: block;
}
</style>

<script language=JavaScript src="js/jquery.min.js" type=text/javascript></script>
<script>
  $(document).ready(function() {
    $('#logoutBtn').addClass('hide');

    $('#logoutBtn').bind('click', function() {
      $('#title').html('Agreements<br>1. ...<br>2. ...<br>3. ...');
      $('#loginBtn').removeClass('hide').addClass('show');
      $('#confirm').removeClass('hide').addClass('show');
      $('#logoutBtn').removeClass('show').addClass('hide');
    });
  });

  function doCheck() {
    if ($("input[type='checkbox']").is(':checked')) {
      $('#loginBtn').bind('click', function() {
        $('#title').text('Welcome to our site!');
        $('#loginBtn').removeClass('show').addClass('hide');
        $('#confirm').removeClass('show').addClass('hide');
        $('#logoutBtn').removeClass('hide').addClass('show');
      });
    } else {
      $('#loginBtn').unbind('click');
    }
  }
</script>

<body>
  <p id="title">
    Agreements<br>1. ...<br>2. ...<br>3. ...
  </p>
  <div id="confirm">
    <input id="cbx" type="checkbox" onclick="doCheck()" />I have read and
    accept.
  </div>
  <input id="loginBtn" type="button" value="Login" />
  <input id="logoutBtn" type="button" value="Logout" />
</body>
</html>

代码中还用到JQuery的几个方法，简单说明一下：

html()方法：设置被选择元素的html内容，相当于document.getElementById(“#xxx”).innerHTML=”xxx”。
text()方法：设置被选择元素的文本内容，相当于document.getElementById(“#xxx”).innerText=”xxx”。
removeClass(）：被选择元素移除一个CSS样式。
addClass(）：被选择元素添加一个CSS样式。
$(“input[type='checkbox']”).is(‘:checked')：判断复选框是否选中。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery添加删除按钮Click事件 # jQuery添加按钮Click事件 # jQuery删除按钮Click事件 # JQuery给元素绑定click事件多次执行的解决方法 # jquery slibings选取同级其他元素的实现代码 # jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例 # jQuery 滑动方法slideDown向下滑动元素 # JQuery 给元素绑定click事件多次执行的解决方法 # jQuery动态添加li标签并添加属性和绑定事件方法 # jQuery页面元素动态添加后绑定事件丢失方法 # 非 live # Jquery为DIV添加click事件的简单实例 # jQuery为iframe的body添加click事件的实现代码 # JQuery实现ul中添加LI和删除指定的Li元素功能完整示例 # 复选框 # 勾选 # 几个 # 是一种 # 才会 # 是怎么 # 使我 # 或删除 # 我已 # 所示 # 经常会 # 随时随地 # 大家多多 # 通常会 # 切换到 # 如下图 # 移除 # 上去了 # bind # unbind

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Laravel 即时应用的一种实现方式

下一篇：克隆建站系统支持哪些类型的网站进行克隆操作？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Laravel 即时应用的一种实现方式

下一篇：克隆建站系统支持哪些类型的网站进行克隆操作？