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


当前回答

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

其他回答

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
$(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.
    }
  });
});

谢谢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 val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

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

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

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

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