Question

我有一些带有名称的复选框，如果我选中该复选框，我希望带有十字符号的标签输入应该带有十字符号，如果我点击该十字符号，则复选框应自动取消选中。请帮忙。

Answer 1

立即尝试

<html>
   <head>
     <title>title</title>
     <style>
     *{font-family:sans-serif}
     body{margin:60px}
     #filter{height:100px}
     label{cursor:pointer}
     </style>
   </head>
   <body>
      <div id="filter">
         <h2>Filter</h2>
         <hr>
         <div id="filterContent">
         </div>
      </div>
     <div id="root">
       <label>
        <input type="checkbox">
         <span>Red</span>
       </label>
       <label>
        <input type="checkbox">
         <span>blue</span>
       </label>
       <label>
        <input type="checkbox">
         <span>Yellow</span>
       </label>

     </div>
   </body>

   <script>
          var checkboxes=document.getElementById('root').children;
          var filterContent=document.getElementById('filterContent');
          var filterChildren=filterContent.children;

            for(i=0;i<checkboxes.length;i++){

               checkboxes[i].children[0].addEventListener('click',function(){

               if(this.checked && this.getAttribute('type')=='checkbox'){
               var span=document.createElement('span');
                  span.setAttribute('onclick','setCheck(this)')

                  span.innerHTML='X '+'<span>'+this.parentElement.children[1].innerHTML+'</span>';
                  span.style.cursor='pointer';
                  span.style.color='#484646';
                  span.style.background="#e2e2e2";
                  span.style.padding='6px 12px'
                  span.style.borderRadius='5px';
                  span.style.marginLeft='10px';
                  filterContent.appendChild(span);
                }
                else{
                   for(i=0;i<filterChildren.length;i++){
                      if(filterChildren[i].children[0].innerHTML==this.parentElement.children[1].innerHTML){
                        filterContent.removeChild(filterChildren[i]);
                      }
                   }
                }

             })
          }

          function setCheck(index){

              for(i=0;i<checkboxes.length;i++){
                if(index.children[0].innerHTML==checkboxes[i].children[1].innerHTML){
                 checkboxes[i].children[0].checked=false;
               }
          }
          index.parentElement.removeChild(index)

          }

   </script>
</html>

如何以tag-input的形式编写一个选中的复选框

1 个答案: