如何使用jQuery获得选中的复选框值,并立即将其放入文本区?

就像下面的代码:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

如果id="c_d"由Ajax更新,altCognito代码的下面部分将不起作用。有什么好的解决办法吗?


当前回答

试试这个。

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

其他回答

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

如果你想在任何复选框被选中时立即插入它的值,那么这应该为你工作:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

我有一个类似的问题,这是我如何解决它使用上面的例子:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

我用另一个帖子的答案来完成同样的事情,一个更简单和简短的方法是这样的:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

最初,城市是从MySQL数据库中检索的,并在PHP while循环中循环:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

现在,使用上面的jQuery代码,我得到了所有的city_id值,并使用$.get(…)提交回数据库

这让我的生活变得如此简单,因为现在代码是完全动态的。为了添加更多的城市,我所需要做的就是在我的数据库中添加更多的城市,而不用担心PHP或jQuery。

您也可以返回所有选定的复选框值,以逗号分隔的字符串。 这也将使您更容易将其作为参数发送到SQL

下面是一个示例,返回所有选定的复选框值,其名称为“chkboxName”,逗号分隔字符串

这是javascript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(function () {
    return this.value;
  }).get().join(","));
}

下面是HTML示例

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>