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

Question

I want to show the selected checkbox label name in textbox and select more than one checkboxes then its labels separated with comma and show in my textbox , sorry for my 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>

Answer 1

Check this 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>

Answer 2

You can bind change event handler to checkboxes

//Cache elements in a vraible
var elems = $('.dropdown-content :checkbox');

//Bind the change event handler 
elems.on('change', function() {

    var str = elems
        .filter(':checked') //filter checked checkboxes
        .map(function() { //iterate 
            return $(this).next().text(); //Get immediately following sibling span text 
        })
        .get() //return you an array
        .join(','); //join an create a string

    $('label').text(str); //set text 
});

$(document).ready(function() {
  $('.dropdown').click(function() {
    $('.dropdown-content').fadeToggle();
  });
  
  //Cache elements in a vraible
  var elems = $('.dropdown-content :checkbox');
  
  //Bind the change event handler 
  elems.on('change', function() {
    
    var str = elems
    //filter checked checkboxes
    .filter(':checked')
    //iterate an get sibiling span text 
    .map(function() {
      return $(this).next().text();
    })
    //return you an array
    .get()
    //join 
    .join(',');
    
    $('label').text(str)
  });
  
  
});

.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>
<label></label>