资讯论坛»论坛 › ※会员之家※ › 技术分享 › js如何实现点击li选中和取消里面的复选框 ...

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

查看: 1188|回复: 0

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

[复制链接]

升平网络工作室

8436 主题	8471 帖子	9396 积分

管理员

Rank: 9 Rank: 9 Rank: 9

积分: 9396

发表于 2020-8-24 11:56:35 | 显示全部楼层 |阅读模式

正常情况下，只有单机复选框本身才可以选中或者取消选中复选框，有时候可能需要这样的效果，只要单机复选框所在的行即可选中或者取消，下面就通过代码实例简单介绍一下如何实现此效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul{list-style:none;}
</style>
<script type="text/javascript">
window.onload=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
if(this.children[0].checked==true){
this.children[0].checked=false;
}
else if(this.children[0].checked==false){
this.children[0].checked=true;
}
}
}
}
</script>
</head>
<body>
<ul>
<li><input type="checkbox" />只有努力才会有美好的明天。</li>
<li><input type="checkbox" />没有哪个人一开始就是高手，需要努力学习</li>
<li><input type="checkbox" />每一天都是新的，要好好把握当前</li>
<li><input type="checkbox" />太阳出来了，每一天都是新的</li>
</ul>
</body>
</html>

复制代码

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

一.实现原理:

原理很简单，就是为每一个li元素注册click事件处理函数，当点li元素的时候，能够通过children[0]获取浮复选框，然后判断它是否当前被选中，如果被选中，那么就取消复选框选中，如果没有被选中，则选中复选框。（在前一标签为children[0]）

打赏鼓励一下！

打赏

使用道具举报

返回列表

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

新用户