checkbox的点击事件

最新推荐文章于 2024-06-22 21:00:00 发布
最新推荐文章于 2024-06-22 21:00:00 发布
阅读量5.6k 收藏 2
点赞数
分类专栏： 微信小程序 taro+vue 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ScumStudy/article/details/122121524
版权

需求：

当我们点击“手机密码登录”按钮的时候，
在这里插入图片描述会先提示“请阅读并勾选底部协议”的提示语，
在这里插入图片描述勾选了底部的按钮，
在这里插入图片描述
在这里插入图片描述
点击“手机密码登录”才会跳转到另一个页面

代码实现：

先给按钮手机密码按钮绑定一个事件

在这里插入图片描述

再给checkbox绑定事件，并且双向绑定checked，监听checked的变化

在这里插入图片描述
先给双向绑定的checked赋值为false，无勾选
在这里插入图片描述
在方法里面复选框的点击事件的checked取反
在这里插入图片描述
最后在手机密码登录的按钮实现点击事件
在这里插入图片描述

*初级小白*~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 复选框 事件,Checkbox 对象属性和事件
weixin_33675283的博客
06-03 3038
Checkbox 对象属性和事件HTML DOM Checkbox 对象Checkbox 对象Checkbox 对象代表一个 HTML 表单中的 一个选择框。在 HTML 文档中 每出现一次，Checkbox 对象就会被创建。您可以通过遍历表单的 elements[] 数组来访问某个选择框，或者通过使用 document.getElementById() 。IE: Internet Explor...
checkbox事件
weixin_30332241的博客
07-08 3119
<input id='bigclassauthorize' type='checkbox' onclick='testClickBigCheckBox()'/><input id='smallclassauthorize1' type='checkbox'/> function testClickBigCheckBox(){　　var big = docume...
checkbox 复选框 冒泡事件
最新发布
HDdgut的博客
06-22 262
解决办法：给checkbox绑定一个catchtap，指向空事件，阻止事件冒泡，如：catchtap=“checkEvent”，checkEvent定义一个空事件。3 @click.native ：绑定原生的点击事件 ，（vue的组件中使用原生的点击事件，需要加.native ）1 @click.stop ：阻止事件冒泡，点击该元素时，仅执行本身绑定事件，不会执行该元素的父元素的绑定事件。5 @click.capture ：事件捕获 使事件触发从包含这个元素的顶层开始往下触发。
checkbox选中触发事件_事件选择器
weixin_39528843的博客
11-21 8203
一.选择器1.过滤选择器（跟节点遍历-过滤相似）​ ①找第一个元素​ 语法：$("选择器：first")​ ②找最后一个元素​ 语法：$("选择器：last") ​ ③根据索引查找元素​ 语法：$("选择器：eq(索引)")​ ④找符合条件之外...
使用checkBox组件时，动态设置disabled，仍能触发click事件的原因及解决办法
小蓝人的博客
08-03 2264
在使用vant的Checkbox组件时，为了实现复选框组选择一个，禁用掉另一个，同时添加点击事件的功能时。遇到明明disabled=true，但仍能触发点击事件的情况。为此，分析下触发点击事件的原因及解决方法。
checkbox选中触发事件_JavaScript事件三部曲之事件的兄弟姐妹们
weixin_39953578的博客
11-21 1412
在前面的两篇文章中，已经介绍了事件的传达机制，以及如何阻止事件的冒泡与默认的行为。 那么，作为「事件三部曲」的最后一篇，我们就来大概介绍一下，DOM 规范之中究竟提供了哪些事件。事件的种类浏览器可能发生的事件有很多种，了解这些事件的情境及效果，是 Web 开发不能忽略的基础，接下来介绍一下常见的几种事件：界面相关事件界面相关的事件不一定会与使用者对 DOM 的操作有关系，反而大多数与window对...
Vue案例
qq_47433906的博客
01-18 3888
vue购物车案例
input标签checkbox选中触发事件的方法
热门推荐
jiaxiaokai的博客
12-30 2万+
目的： 1. 打开页面时，根据后端返回的的值isRequired，设置页面的checkbox标签的勾选状态，并给隐藏的text标签的value赋值，以便于在提交页面时把isRequired再返回给后端 2. 切换checkbox标签的勾选状态时，修改隐藏的text标签的value的值，勾选是1，取消勾选是0 html代码： <div class="col-sm-8"> <input type="checkbox" class="minimal pull-left Grandpa isR.
jquery checkbox 选中、改变状态、change 和 click 事件
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-10 1万+
jquery判断checked的三种方法: ​​​​​​​ .attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop('checked'); //16+:true/false .is(':checked'); //所有版本:true/false//别忘记冒号哦 jquery赋值checked的几种写...
关于element el-checkbox组件click事件的一些想法
lsf1192354203的博客
02-15 4670
el-checkbox事件及处理函数
checkbox 选中触发change事件- 微信小程序开发技术要点总结（二）
Nicolege678的博客
06-28 1万+
在待办小程序中，我们通过点选checkbox来表明该事项已完成，也就是说当我们点选该checkbox的时候需要绑定一个触发函数，通过点选事件来触发后续的动作，将值存储起来，这样我们重新进入小程序的时候，待办项的完成情况就还是和上次更新的内容一样。 按照官方文档所说，小程序里面选中单个checkbox，会触发 checkbox-group的change事件，所以我们需要在checkbox标签外面加一个check-group标签。并通过 bindchange 绑定触发事件后的处理函数。H5 代码： js 代
vant checkbox 复选框 冒泡事件的处理 点击复选框不触发父元素的点击事件 常见的事件修饰符
m0_49623851的博客
03-07 3218
vant checkbox 复选框 冒泡事件的处理 点击复选框不触发父元素的点击事件 常见的事件修饰符
阻止Checkbox事件冒泡（uniapp）
peachban的博客
11-28 1008
父元素为一个卡片，点击卡片会跳转到新的详情页。复选框（使用checkbox组件）在卡片内部的左侧，点击多选框可以多选删除卡片。直接在checkbox上直接加@click.stop是不生效的，事件冒泡还是存在。用一个容器包裹住复选框，在父元素上添加。修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。在点击复选框时间，会触发父元素的点击事件，直接跳转。使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。只会阻止对元素自身的点击。会阻止所有的点击，而。
触发checkbox的click事件时遇到的问题
aehvbew8628的博客
07-28 546
　　因一些原因要实现checkbox的单选，实现的方法是当选中一个checkbox时，用jQuery选择除这个刚选中的checkbox外所有已经被选中的checkbox，然后触发其click事件（因为每个checkbox状态改变时要处理一些问题，所以不能直接将其checked状态改为false），但却莫名其妙地进入了无限循环． <!DOCTYPE HTML PUBLIC "-...
RadioButton 和 CheckBox
A125679880的博客
12-18 1800
RadioButton 和 CheckBox
div中包含checkbox 点击事件重复问题
sinat_36500530的博客
10-07 259
div中包含checkbox 点击事件重复问题 解决方法 ：根据判断组件属性执行。
单个和多个checkbox选中事件怎么写
weixin_34128839的博客
06-04 1032
单个和多个checkbox选中事件怎么写 一、总结 一句话总结： 1、checkbox的事件方法的话主要是change和click 2、checkbox的属性判断的话主要是prop（判断checked和赋值checked）和attr（赋值checked）和is（判断checked），注意不同版本的不同用法   1、jquery中不同版本的方法使用是否一样？ 解答：不一样，所以我们要注...
Checkboxes
hzhenx1989的专栏
03-30 676
Checkboxes允许用户从一个集合选择一个或是多个选择。典型的就是你可以在一个垂直的列表通过checkbox给用户选择。 你可以在layout中创建一个Checkbox，因为一系类的checkbox选择可以允许用户多选，每个checkbox都是分开管理，你必须为每一个checkbox添加一个点击listener。 响应点击事件 当用户选择一个checkbox，checkb
js checkbox 点击事件
12-27
以下是一个使用JavaScript实现checkbox点击事件的例子： ```html <input type="checkbox" id="cb"> <label for="cb">点击我</label> <script> var checkbox = document.getElementById('cb'); checkbox.addEventListener('click', function() { if (checkbox.checked) { console.log('checkbox被选中'); } else { console.log('checkbox未被选中'); } }); </script> ``` 在上面的例子中，我们首先获取了id为"cb"的checkbox元素，并给它添加了一个点击事件监听器。当checkbox被点击时，事件监听器会检查checkbox的checked属性，如果为true，则表示checkbox被选中，如果为false，则表示checkbox未被选中。根据checkbox的状态，我们可以执行相应的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值