轻松实现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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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
preg_match_all使用心得分享
2014/01/31 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
工作会议方案
2014/05/21 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
护士年终考核评语
2014/12/31 职场文书
美容院员工规章制度
2015/08/05 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP