如何使用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() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

编辑:哦,好的。好了……之前没有HTML。无论如何,是的,我以为你的意思是把值放在一个文本区域,当它被点击。如果你想把选中的复选框的值放在页面加载的文本区域(可能有一个漂亮的逗号分隔),这将是简单的:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

正如人们所做的那样,你也可以这样做来缩短我写的冗长的选择器:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... 我完全忘了那条捷径。;)

其他回答

谢谢altCognito,你的解决方案很有帮助。我们也可以通过使用复选框的名称来做到这一点:

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

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

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。

不管怎样,你可能需要这样的东西:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

这将获得页面上第一个选中的复选框的值,并将其插入id='textarea'的textarea中。

注意,在示例代码中,应该将复选框放在表单中。

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

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