jquery - 如何使用 jquery 获取文本框中的复选框标签值

Question

我想在文本框中显示选中的复选框标签名称并选择多个复选框，然后将其标签用逗号分隔并显示在我的文本框中，抱歉我的英语不好。

$(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

检查这个片段

$(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>