点击文字既可以选中checkbox

最新推荐文章于 2024-07-01 15:10:12 发布
最新推荐文章于 2024-07-01 15:10:12 发布
阅读量745 收藏
点赞数
分类专栏： JavaScript 文章标签： function xhtml jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fisea/article/details/5561462
版权

<label for="cr">我已经阅读了上面制度.

</label><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-6-2</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
//$(document).ready(function(){
// var $cr = $("#cr");  //jQuery对象
// var cr = $cr.get(0); //DOM对象，获取 $cr[0]
// $cr.click(function(){
//  if(cr.checked){ //DOM方式判断
//   alert("感谢你的支持!你可以继续操作!");
//  }
// })
//});
</script>
</head>
<body>
<input type="checkbox" id="cr"/>

<label for="cr">我已经阅读了上面制度.</label>

<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
 var $cr = $("#cr");  //jQuery对象
 $cr.click(function(){
  if($cr.is(":checked")){ //jQuery方式判断
   alert("感谢你的支持!你可以继续操作！");
  }
 })
});
</script></body>
</html>

fisea
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 5——如何点击文字也能选中复选框、单选框、文件上传、文本域、下拉选择框、按钮、元素分类
ranran0306的博客
03-01 4490
1、如何点击文字也能选中复选框 （1）.<label><input type="checkbox">跳舞</label> （2）.<input type="checkbox" id="abc"><label for="abc">爱好</label> 2、复选框如何默认选中 <checked="checked">或checked 3、单选框 <input type="radio" name=""> 注
checkbox 选中一个另一个checkbox也会选中的实现代码
09-02
例如，`$('#checkl1').on('click', function() {...})` 监听 ID 为 `checkl1` 的 `checkbox`，当它被点击时，会根据当前状态更新第一列所有 `checkbox` 的选中状态。这里用了两种方法：一是通过指定多个 ID 并用逗号...
点击文字选中 checkbox
qq_45708267的博客
03-27 428
查看实例 ```html <html> <head> <title>test</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> </head> <body> <form> 第一种： 文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同. <
选择框实现点击文字也能够勾选或取消复选框
最新发布
m0_61968587的博客
07-01 260
在这种方法中，元素位于元素内部，当用户点击标签文本“选项一”时，会选中或取消选中复选框。这种布局方式虽然简单，但标签文本与复选框的对齐可能不够美观。
点击文字选中checkbox
weixin_30386713的博客
04-25 95
<html> <head> <title>test</title> <metahttp-equiv="content-Type"content="text/html;charset=gb2312"> </head> <body> <form&g...
CheckBox复选框实现点击文字选中效果
每天学习一点点
10-14 3370
想实现点击‘物流‘即可选中第一个复选框的效果，想到的方法是在input和物流 外面加上一个label标签 这样修改后可以实现点击文字选中复选框的效果，但是最终想要的效果是点击tr就可以把复选框选中，也就是点击‘物流’所在行就选中复选框。 实现方式就是让label标签占满整个tr，设置label的宽高为100% 问题到此为止成功解决。 ...
解决el-checkbox点击文字也会选中
个人工作学习内容总结
09-19 4354
最近要做一个 多选框嵌套下拉框的一个功能，在点击下拉框时，多选框一直会被选中或者取消，这里做一下解决记录 首先展示一下要做的功能 出现原因： el 的checkbox的组件整个是由lable包裹的，所以重写el-checkbox就可以了 原编码： 解决： 这里用div或者span都是可以的，div会处理成 line-block 引入：
js限制checkbox选中个数以限制六个为例
10-25
这样，用户在点击任何一个checkbox时，都会触发doCheck函数，从而动态地控制选中的数量。 5. 通过设置多个checkbox，用户可以尝试选中多个选项，当选中的数量超过6时，JavaScript脚本就会阻止继续选中，并弹出警告...
HTML checkbox 点击说明文字即可选择/取消勾选状态
09-28
标题和描述中涉及的知识点主要围绕HTML中的checkbox元素，以及如何通过点击与checkbox相关联的说明文字来实现对checkbox的选中和取消选中操作。这一功能在Web开发中是常见的用户界面优化措施，尤其适用于移动设备...
悬浮窗口点击checkbox选中给text文本特效代码
03-20
3. **处理逻辑**：在事件监听器内，根据checkbox的状态（选中或未选中）更新text元素的内容。例如，可以设置一个变量来保存当前的排序顺序，并在checkbox状态改变时更新该变量，然后将变量值赋给text元素。 4. **...
js实现选中复选框文字变色的方法
10-23
1. **复选框的选中状态监听**：通过为复选框绑定一个点击事件（onClick），我们可以在用户交互时触发一个JavaScript函数（如本例中的chaCloor）。这个函数将检查复选框的选中状态，并据此来改变相邻文字的样式。 2....
点击文本选中复选框
旧有-
12-04 560
当使用CheckBox复选框标签的时候，因为复选框后面会跟随着所选的内容。所以初学者往往会直接在复选框标签后面直接添加文本内容。 这样的写法是无法让读者通过点击文字来选定复选框按钮的,内容过多的时候甚至无法判断这是所选内容还是文本自读。 让两者区分开来我们只需在CheckBox标签里面添加Content属性,在里面确定复选框所选内容。 图下是两个写法的样式图,在样式上没有太大的差距,例一可以通过点击文字来选中复选框。 而例二复选框和文字不能当成一个整体。 ...
react改变checkbox的文字类型_实现div的选中多选效果（类似checkbox的多选，能选中也能去除选中）...
weixin_34635170的博客
12-28 388
export default class SelectDiv extends Component {state = {selects: [],renList: [{ name: 'n1' }, { name: 'n2' }, { name: 'n3' }],}handleCheck = ({ name }) => {this.setState(({ selects }) => ({se...
HTML复选框，点击文字，对应的复选框选中
记录一些平时遇到的一些好的文章的转载、bug及解决方案
02-09 2895
纯的html怎么添加，点击文字，对应的复选框选中的效果
el-cascader级联选择 点击文本选中 多选
LJJONESEED的博客
03-20 593
【代码】el-cascader级联选择 点击文本选中 多选。
el-tree点击复选框后的文字也可选中节点
hahaha921的博客
06-08 2164
el-tree标签内加上:check-on-click-node此方法参考el-tree实现多选/父节点无勾选框/点击文字选中_一路追求匠人精神的博客-CSDN博客_el-tree实现多选搜索了很多方法只有这个博主的方法简单有效，其他都是要写多余的方法的...
如何在点击复选框后面的文字时候,可以选中前面的复选框
m0_57236802的博客
09-14 686
要实现点击复选框后面的文字时选中前面的复选框，你可以使用HTML的元素，并通过for属性将其与复选框关联。for属性的值应与复选框的id属性值相同。这样，当用户点击标签时，与之关联的复选框就会被选中或取消选中。
el-cascader级联选择器为文字绑定联动，实现点击文字即选中
一些简单的分享
05-30 875
目前更新的版本中`el-cascader`组件不支持选择文字即选中的效果，我觉得可能是因为原先文字有切换、展开弹窗等事件，所以没有添加这个功能。 我们现在要实现这个功能也是简单，需要自己加上监听，或者自己重新封装组件也是可以的。
uniapp 实现点击checkbox对文字进行隐藏和显示
04-20
可以通过绑定checkbox的v-model属性来控制文字的显隐，在checkbox选中时显示文字，在未选中时隐藏文字。示例代码如下： ``` <input type="checkbox" v-model="checked"> 显示/隐藏文字 需要显示/隐藏的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值