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

时间：2016-09-07 13:07:18

标签： jquery html css

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

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

4 个答案:

答案 0 :(得分：3)

检查此代码段

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

答案 1 :(得分：2)

您可以将更改事件处理程序绑定到复选框

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

答案 2 :(得分：2)

试试这个：

$(document).ready(function(){

    var arr = [];

    $('.dropdown').click(function(){

        $('.dropdown-content').fadeToggle();

    })

    $(".dropdown-content :checkbox").on("change",function(){

        if ($(this).prop("checked"))
            arr.push($(this).next().text());

        else {
            var index = arr.indexOf($(this).next().text());
            arr.splice(index,1);
        }

        $(".dropdown").val(arr);

    })

})

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .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;
}
    </style>
</head>
<body>
    
   <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>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
    
    $(document).ready(function(){

        var arr = [];

        $('.dropdown').click(function(){

            $('.dropdown-content').fadeToggle();

        })

        $(".dropdown-content :checkbox").on("change",function(){

            if ($(this).prop("checked"))
                arr.push($(this).next().text());

            else {
                var index = arr.indexOf($(this).next().text());
                arr.splice(index,1);
            }

            $(".dropdown").val(arr);

        })

    })
    
       
    </script>
    </body>
</html>

答案 3 :(得分：0)

这应该有效

$("input[type='checkbox']").change(function(){
    var values =  $("input[type='checkbox']:checked")
  .map(function () {
    return $(this).closest("li").find("span").text();
  })
  .get()
   .join(',');

   $("input[type='text']").val(values);
});
相关问题
最新问题