Samudrala Ramu Samudrala Ramu - 3 months ago 6
CSS Question

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

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

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>