轻松实现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 getJSON 处理json数据的代码
Jul 26 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 Javascript
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
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
python程序需要编译吗
2020/06/19 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
离职保密承诺书
2014/05/28 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
公司感谢信范文
2015/01/22 职场文书
中学总务处工作总结
2015/08/12 职场文书
关于五一放假的通知
2015/08/18 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL