为何复选框打勾后，没有移动到下面蓝色盒子中

小黄练编程 · 发表于 2022-5-3 20:00:09

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <title>Document</title>
    <style>
        input{
            display:inline-block;
        }
        .one{
            width:500px;
            height:400px;
            background-color:yellow;
            overflow:scroll;
        }
        .two{
            width:500px;
            height:500px;
            background-color:aqua;
        }
        .one li{

            width:300px;
            margin:0 auto;
            background-color:antiquewhite;
            margin-top:20px;
            
        }
        .one li p{
            display:inline-block;
            text-align:center;
            margin-left:70px;
        }
        .one li a{
            margin-left:100px;
            text-decoration:none;
            color:red;
        }
         
    </style> 
</head>
<body>
<!-- <form>如果添加了<from>需要把按回车键自动刷新是form的特性
如果你一定要监听回车事件   就要取消这个特性  阻止form的自动提交 -->
<form>
    <input id="usname" value="sd" >
    <input id="checked"  type="checkbox">
    <button>添加</button>
</form>
<div class="one">
    <ol></ol>
</div>
<div class="two">
    <ol></ol>
</div>
    <script>
        var todolist=[
            {
                title:'未来很美好',
                done:false,
            },

            {
                title:'美好的一天',
                done:false,
            },
        ];
      
        //
        let ipt=document.querySelector('#usname');
        const checked=document.querySelector('#checked');
        const  btn=document.querySelector('button');
        const one=document.querySelector('.one');
        const two=document.querySelector('.two');
        const ol1=one.querySelector('ol');
        const  ol2=two.querySelector('ol');
        console.log(ol1);
        console.log(ol2);
  
  //
        //  本地存储里只能存储字符串的数据格式，把我们的数组对象转换为字符串格式 JSON.stringfy();
        localStorage.setItem('todo',JSON.stringify(todolist));
        // localStorage.setItem('todo',todolist);
        let data=localStorage.getItem('todo');
        data=JSON.parse(data);
         load();
          ipt.addEventListener('keydown',function(event){
                if(event.keyCode===13){
                    //先获取本地存储的数据
                 var local=getdate();
                //  console.log(local[0]);
                 //更新local数组中的数据（将新的数据追加进去）;
                 local.push({title:this.value,done:false});
                 //把更新了的数组local存储给本都存储
                 savadate(local);
                //  页面渲染数据
                load();
                }
       
          });
          //读取本地存储的数据
          function  getdate(){
              var data=localStorage.getItem('todolist');
              if(data!==null){
                  return JSON.parse(data);
              }
              else {
                  return [];
              }
          }
          //将数据存储进本地存储必须是字符串格式所以用JSON.stringify()转化。
          //将数据从本地存储中取出来，需要将字符串转化为对象用JSON.parse();
          //将更新的数组存储给本地存储及替换掉以前的就数组本地存储数据
          function   savadate(data){
              localStorage.setItem('todolist',JSON.stringify(data));
          }
          function load(){
              var data=getdate();
              console.log(data.length);
              for(var i=0;i<data.length;i++){
                  var li=document.createElement('li');
                  li.setAttribute('index',i);
                  ol1.appendChild(li);
                  li.innerHTML='<input type='+'checkbox'+'>'+'<p>'+data[i].title+'</p><a href="javascript:;">删除</a>'
                  //删除li
                  li.children[2].addEventListener('click',function(){
                      ol1.removeChild(this.parentNode);
                      const ipt=ol1.querySelector('input');
                      var flag=0;
                      ipt.addEventListener('click',function(){
                          if(flag==0 && this.checked==true){
                          ol2.appendChild(this.parentNode);
                          flag=1;
                          alert('11');
                          }
                       })
                      if(flag==1 && this.checked==true){
                              ol1.appendChild(this.parentNode);
                              flag=0;
                              alert('11');
                          }
                  })
              }
          }
          

</script>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册