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


Posted in Javascript onMarch 13, 2017

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

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

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

轻松实现jQuery添加删除按钮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'):判断复选框是否选中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
javascript简易画板开发
Apr 12 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
jQuery+CSS3实现点赞功能
Mar 13 #Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 #Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 #Javascript
常用的几个JQuery代码片段
Mar 13 #Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 #Javascript
jquery实现表单获取短信验证码代码
Mar 13 #Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 #Javascript
You might like
PHP7新增运算符用法实例分析
2016/09/26 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python logging类库使用例子
2014/11/22 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
详解python Todo清单实战
2018/11/01 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python实现简单飞行棋
2020/02/06 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
好矿嫂事迹材料
2014/01/21 职场文书
优秀食品类广告词
2014/03/19 职场文书
电钳工人个人求职信
2014/05/10 职场文书
村党支部公开承诺书
2014/05/29 职场文书
党的生日活动方案
2014/08/15 职场文书
人事文员岗位职责
2015/02/04 职场文书
无保留意见审计报告
2015/06/05 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android