罗田县升平网络工作室,一家专业从事网站建设的工作室

罗田县社区

 找回密码
 加入罗田县社区

QQ登录

只需一步,快速开始

快捷登录

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。
查看: 264|回复: 0

js如何实现点击li选中和取消里面的复选框

[复制链接]
发表于 2020-8-24 11:56:35 | 显示全部楼层 |阅读模式

正常情况下,只有单机复选框本身才可以选中或者取消选中复选框,有时候可能需要这样的效果,只要单机复选框所在的行即可选中或者取消,下面就通过代码实例简单介绍一下如何实现此效果。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="author" content="http://www.softwhy.com/" />
  6. <title>蚂蚁部落</title>
  7. <style type="text/css">
  8. ul{list-style:none;}
  9. </style>
  10. <script type="text/javascript">
  11. window.onload=function(){
  12.   var lis=document.getElementsByTagName("li");
  13.   for(var i=0;i<lis.length;i++){
  14.     lis[i].onclick=function(){
  15.       if(this.children[0].checked==true){
  16.         this.children[0].checked=false;
  17.       }
  18.       else if(this.children[0].checked==false){
  19.         this.children[0].checked=true;
  20.       }
  21.     }
  22.   }
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <ul>
  28.   <li><input type="checkbox" />只有努力才会有美好的明天。</li>
  29.   <li><input type="checkbox" />没有哪个人一开始就是高手,需要努力学习</li>
  30.   <li><input type="checkbox" />每一天都是新的,要好好把握当前</li>
  31.   <li><input type="checkbox" />太阳出来了,每一天都是新的</li>
  32. </ul>
  33. </body>
  34. </html>
复制代码


只要点击li元素就可以选中或者取消选中当前li元素中的复选框,下面介绍一下实现过程。

一.实现原理:

原理很简单,就是为每一个li元素注册click事件处理函数,当点li元素的时候,能够通过children[0]获取浮复选框,然后判断它是否当前被选中,如果被选中,那么就取消复选框选中,如果没有被选中,则选中复选框。(在前一标签为children[0])
打赏鼓励一下!
*罗田县社区ltxbbs.cn 罗田人自己的社区!
回复

使用道具 举报

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

最新发表

[升平网络工作室]多人确诊!立即暂停!

[升平网络工作室]罗田县事业单位2020年统一组织公开招聘工作人员体检、考察公告

[升平网络工作室]罗田县教育局下属事业单位2020年公开招聘高层次人才体检、考察递补公告

[升平网络工作室]罗田县教育局下属事业单位2020年统一组织公开招聘工作人员体检、考察公告

[升平网络工作室]依法防控筑防线 共战疫情保平安

[升平网络工作室]工作动态|匡河镇多种形式开展“国家宪法日”宣传活动

[升平网络工作室]婚姻登记,重大调整!

[升平网络工作室]此人多次闯红灯,盘他!

[升平网络工作室]“湖北科技”冲出星际!首次在月球“独立展示”五星红旗!

[升平网络工作室]【12.4宪法宣传日】罗田公安送法到基层

QQ|Archiver|手机版|小黑屋|罗田县社区LTXBBS.CN ( 鄂ICP备18029072号-1 )|网站地图


手机扫一扫继续访问
[免责声明]
本站系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容!
[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。

进入社区 | 发表新帖 | 百度收录 |
技术提供:罗田县升平网络工作室
站长Email:admin@ltxbbs.cn
投诉电话(刮开查看):15374567400

GMT+8, 2020-12-5 20:03 , Processed in 0.120075 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表