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

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > js如何实现点击li选中和取消里面的复选框

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

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</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>

代码描述：js 点击li选中取消复选框。js如何实现点击li选中和取消里面的复选框

下载全部收藏

146 195

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册