html - How To Get Check Box label value in textbox using with jquery -

i want show selected checkbox label name in textbox , select more 1 checkboxes labels separated comma , show in textbox , sorry bad english .

$(document).ready(function() {    $('.dropdown').click(function() {      $('.dropdown-content').fadetoggle();    });  });

.dropdown {    width: 250px;    height: 30px;  }  .dropdown-content {    width: 253px;    height: 100px;    overflow-y: auto;    border: 1px solid #ff8800;    border-top: 0px;    display: none;  }  .dropdown-content ul {    padding: 0px;  }  .dropdown-content li {    list-style: none;    width: 100%;    color: #fff;    background: #ff8800;    height: 25px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="text" class="dropdown" placeholder="select values" />  <div class="dropdown-content">    <ul>      <li>        <input type="checkbox" /><span>one</span>      </li>      <li>        <input type="checkbox" /><span>two</span>      </li>      <li>        <input type="checkbox" /><span>three</span>      </li>      <li>        <input type="checkbox" /><span>four</span>      </li>      <li>        <input type="checkbox" /><span>five</span>      </li>      <li>        <input type="checkbox" /><span>six</span>      </li>      <li>        <input type="checkbox" /><span>seven</span>      </li>      <li>        <input type="checkbox" /><span>eight</span>      </li>      <li>        <input type="checkbox" /><span>nine</span>      </li>    </ul>  </div>

check snippet

$(document).ready(function(){  $('.dropdown').click(function(){  $('.dropdown-content').fadetoggle();  });   $("input:checkbox").click(function() {          var output = "";          $("input:checked").each(function() {              output += $(this).next('span').text() + ", ";          });           $(".dropdown").val(output.trim().slice(0,-1));      });   });

.dropdown{   width:250px;   height:30px;  }  .dropdown-content{    width:253px;    height:100px;    overflow-y:auto;     border:1px solid #ff8800;    border-top:0px;    display:none;  }  .dropdown-content ul{padding:0px;}  .dropdown-content li{         list-style:none;     width:100%;     color:#fff;     background:#ff8800;     height:25px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="text" class="dropdown" placeholder="select values"/>  <div class="dropdown-content">  <ul>    <li><input type="checkbox"/><span>one</span></li>      <li><input type="checkbox"/><span>two</span></li>     <li><input type="checkbox"/><span>three</span></li>     <li><input type="checkbox"/><span>four</span></li>     <li><input type="checkbox"/><span>five</span></li>     <li><input type="checkbox"/><span>six</span></li>     <li><input type="checkbox"/><span>seven</span></li>     <li><input type="checkbox"/><span>eight</span></li>     <li><input type="checkbox"/><span>nine</span></li>   </ul>  </div>