如何在 jQuery 中检索复选框值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/786142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to retrieve checkboxes values in jQuery
提问by lanqy
How to use jQueryto get the checked checkboxes values, and put it into a textarea immediately?
如何使用jQuery获取选中的复选框值，并立即将其放入textarea？
Just like this code:
就像这段代码：
<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>
If the id="c_d"is updated by Ajax, the below of altCognito's code doesn't work. Is there any good solution?
如果id="c_d"由Ajax更新，则下面的 altCognito 代码不起作用。有什么好的解决办法吗？
回答by cgp
Here's one that works (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();
});
Update
更新
Some number of months later another question was asked in regards to how to keep the above working if the ID changes. Well, the solution boils down to mapping the updateTextArea function into something generic that uses CSS classes, and to use the live function to monitor the DOM for those changes.
几个月后，另一个问题是关于如果 ID 更改如何保持上述工作。好吧，解决方案归结为将 updateTextArea 函数映射到使用 CSS 类的通用函数，并使用 live 函数来监视 DOM 的这些更改。
回答by Mohamed ElSheikh
You can also return all selected checkboxes value in comma separated string. This will also make it easier for you when you send it as a parameter to SQL
您还可以以逗号分隔的字符串形式返回所有选定的复选框值。当您将它作为参数发送给 SQL 时，这也将使您更容易
Here is a sample that return all selected checkboxes values that have the name "chkboxName" in comma separate string
这是一个示例，它以逗号分隔的字符串形式返回名称为“chkboxName”的所有选定复选框值
And here is the javascript
这是 javascript
function showSelectedValues()
{
alert($("input[name=chkboxName]:checked").map(
function () {return this.value;}).get().join(","));
}
Here is the HTML sample
这是 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>
回答by KyleFarris
Your question is quite vague but I think this is what you need:
你的问题很模糊，但我认为这就是你需要的：
$(function() {
$('input[type="checkbox"]').bind('click',function() {
if($(this).is(':checked')) {
$('#some_textarea').html($(this).val());
}
});
});
Edit:Oh, okay.. there you go... You didn't have the HTML up before. Anyways, yeah, I thought you meant to put the value in a textarea when it gets clicked. If you want the checked checkboxes' values to be put into the textarea (maybe with a nice comma-seperation) on page load it would be as simple as:
编辑：哦，好吧.. 你去......你之前没有HTML。无论如何，是的，我以为您打算在单击时将该值放入 textarea 中。如果您希望在页面加载时将选中的复选框的值放入 textarea（可能带有一个很好的逗号分隔符），它将非常简单：
$(function() {
$('#c_b input[type="checkbox"]:checked').each(function() {
$('#t').append(', '+$(this).val());
});
});
Edit 2As people have done, you can also do this to shortcut the lengthy selector I wrote:
编辑 2正如人们所做的那样，您也可以这样做来缩短我写的冗长选择器：
$('#c_b :checkbox:checked').each(function() {
$('#t').append(', '+$(this).val());
});
... I totally forgot about that shortcut. ;)
...我完全忘记了那个捷径。;)
回答by Nic
This works perfectly for me:
这对我来说非常有效：
alert($("input[name=chkboxName]:checked").map(function() {
return this.value;
}).get().join(","));
Thanks Mohamed ElSheikh
感谢穆罕默德·谢赫
回答by Harpreet Bhatia
Thanks altCognito, your solution helped. We can also do this by using name of the checkboxes:
感谢 altCognito，您的解决方案有所帮助。我们也可以通过使用复选框的名称来做到这一点：
function updateTextArea() {
var allVals = [];
$('[name=chkbox]:checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
回答by Andy
The following may be useful since I got here looking for a slightly different solution. My script needed to automatically loop through input elements and had to return their values (for jQuery.post() function), the problem was with checkboxes returning their values regardless of checked status. This was my solution:
以下内容可能有用，因为我来到这里寻找稍微不同的解决方案。我的脚本需要自动循环遍历输入元素并且必须返回它们的值（对于 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();
}
};
Usage:
用法：
jQuery(".element").input_val();
If the given input field is a checkbox, the input_val function only returns a value if its checked. For all other elements, the value is returned regardless of checked status.
如果给定的输入字段是复选框，则 input_val 函数仅在选中时返回一个值。对于所有其他元素，无论检查状态如何，都会返回该值。
回答by pgcd
Here's an alternative in case you need to save the value to a variable:
如果您需要将值保存到变量，这里有一个替代方法：
var _t = $('#c_b :checkbox:checked').map(function() {
return $(this).val();
});
$('#t').append(_t.join(','));
(map() returns an array, which I find handier than the text in textarea).
（map() 返回一个数组，我发现它比 textarea 中的文本更方便）。
回答by satoru
function updateTextArea() {
var allVals = $('#c_b :checked').map(function() {
return $(this).val();
}).get();
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
回答by satoru
$(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.
}
});
});
回答by Pim Jager
Anyway, you probably need something like this:
无论如何，你可能需要这样的东西：
var val = $('#c_b :checkbox').is(':checked').val();
$('#t').val( val );
This will get the value of the first checked checkbox on the page and insert that in the textarea with id='textarea'.
这将获取页面上第一个选中复选框的值，并将其插入到 textarea 中id='textarea'。
Note that in your example code you should put the checkboxes in a form.
请注意，在您的示例代码中，您应该将复选框放在表单中。
