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


当前回答

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

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

其他回答

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

以下内容可能会有用,因为我来这里是为了寻找一个略有不同的解决方案。我的脚本需要自动循环输入元素,并必须返回它们的值(对于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函数只在它被选中时才返回值。对于所有其他元素,不管检查状态如何,都返回该值。

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

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

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

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

试试这个。

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