如何使用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代码的下面部分将不起作用。有什么好的解决办法吗?


当前回答

下面是一个有效的方法(见示例):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

更新

几个月后,另一个问题被问到,如果ID发生变化,如何保持上述工作。解决方案可以归结为将updateTextArea函数映射为使用CSS类的通用函数,并使用live函数监视DOM中的这些更改。

其他回答

这里有一个替代方案,以防你需要将值保存到一个变量:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map()返回一个数组,我发现它比textarea中的文本更方便)。

$("#t").text($("#cb").find(":checked").val())

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

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。

$(document).ready(function() {
  $(':checkbox').click(function() {
    var cObj = $(this);
    var cVal = cObj.val();
    var tObj = $('#t');
    var tVal = tObj.val();
    if (cObj.attr("checked")) {
      tVal = tVal + "," + cVal;
      $('#t').attr("value", tVal);
    } else {
      //TODO remove unchecked value.
    }
  });
});

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

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