Question

如何使用jQuery获取选中的复选框值，并立即将其放入textarea？

就像这段代码：

<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代码的下方不起作用。有什么好的解决方案吗？

Answer 1

这是一个有效的（see the example）：

 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以获取这些更改。

Answer 2

您还可以在逗号分隔的字符串中返回所有选中的复选框值。当您将其作为参数发送到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>

Answer 3

你的问题很模糊，但我认为这就是你所需要的：

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

编辑：哦，好的..你去了...你以前没有HTML。无论如何，是的，我认为你的意思是在点击时将值放在textarea中。如果您希望在页面加载时将选中的复选框的值放入textarea（可能带有一个很好的逗号分隔），它将非常简单：

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

编辑2 正如人们所做的那样，你也可以这样做来快捷我写的冗长的选择器：

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

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

Answer 4

这对我很有用：

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

感谢Mohamed ElSheikh

Answer 5

感谢altCognito，您的解决方案有所帮助。我们也可以使用复选框的名称来执行此操作：

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

Answer 6

以下内容可能非常有用，因为我在这里寻找的是一个稍微不同的解决方案。我的脚本需要自动循环输入元素并且必须返回它们的值（对于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函数仅在其选中时返回值。对于所有其他元素，无论选中状态如何，都会返回该值。

Answer 7

如果您需要将值保存到变量，可以使用以下选项：

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

（map（）返回一个数组，我发现它比textarea中的文本更方便。）

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

无论如何，你可能需要这样的东西：

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

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

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

Answer 12

使用其他帖子的答案，我用来完成相同的更容易和更短的方式是这样的：

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

最初城市是从MySQL数据库中检索出来的，并在循环中循环使用PHP：

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结束。

Answer 13

如果您想在检查时立即插入任何复选框的值，那么这应该适合您：

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

Answer 14

我遇到了类似的问题，这就是我用上面的例子解决它的方法：

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

Answer 15

试试这个..

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

如何在jQuery中检索复选框值

15 个答案:

更新