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


当前回答

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

其他回答

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

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

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

$("#t").text($("#cb").find(":checked").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();
});

你的问题很模糊,但我认为这是你需要的:

$(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());
});

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

以下内容可能会有用,因为我来这里是为了寻找一个略有不同的解决方案。我的脚本需要自动循环输入元素,并必须返回它们的值(对于jQuery.post()函数),问题是复选框返回它们的值而不管选中的状态。这就是我的解决方案:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

用法:

jQuery(".element").input_val();

如果给定的输入字段是一个复选框,input_val函数只在它被选中时才返回值。对于所有其他元素,不管检查状态如何,都返回该值。