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

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

如下图所示，勾选“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

返回目录在线咨询

上一篇：免费建站空间能满足企业需求吗？其优缺点是什么？
下一篇：网络营销优化培训,中公教育旗下的优就业，IT教育培训做的怎么样？我准备去学习网络营销？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求