如何检索jQuery中的复选框值

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

更新

这是一个工程。（见例子）

  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的这些更改。对不起，我现在不是真的要写这个例子。

您也可以用逗号分隔的字符串返回所有选中的复选框值。当您将其作为参数发送给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() { $('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()); });

我完全忘记了这个捷径。 ;）

这对我来说是完美的：

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

感谢Mohamed ElSheikh

Thanx的altCognito你的解决方案帮助….我们也可以通过使用复选框的复选框…

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

这个也有帮助

以下可能是有用的，因为我到这里寻找一个稍微不同的解决方案。我的脚本需要自动循环输入元素，并且必须返回它们的值（对于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中的文本更加容易）。

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

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

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

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

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

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

请注意，在你的示例代码中，你应该把复选框放在一个表单中。

 <html> <head> <title>jQuery check / uncheck a check box example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery check / uncheck a check box example</h1> <script type="text/javascript"> $(document).ready(function(){ $("#isCheck").click(function () { alert($('input:checkbox[name=checkme]').is(':checked')); }); $("#checkIt").click(function () { $('input:checkbox[name=checkme]').attr('checked',true); }); $("#UnCheckIt").click(function () { $('input:checkbox[name=checkme]').attr('checked',false); }); }); </script> </head><body> <input type="checkbox" name="checkme">Check Me</input> <br/> <br/> <br/> <input type='button' value='Is Check' id='isCheck'> <input type='button' value='Check It' id='checkIt'> <input type='button' value='UnCheck It' id='UnCheckIt'> </body> </html>

我用另一篇文章的答案来解决这个问题的方法更容易和简短，就是这样的：

 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的问题。

如果你想插入任何复选框的值，因为它是eke ccked，那么这应该为你工作

   $（ “：勾选”）点击（函数（）{。
     $（ “＃ID”）。文本（THIS.VALUE）
   }）

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

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

试试这个..

 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中的复选框值

HTML复选框可以设置为只读吗？

如何在HTML中实现“全选”复选框？