Javascript 使用jQuery获取所选复选框的值_Javascript_Jquery

Javascript 使用jQuery获取所选复选框的值

javascript jquery

Javascript 使用jQuery获取所选复选框的值,javascript,jquery,Javascript,Jquery,我想循环检查复选框组“locationthemes”，并用所有选定的值构建一个字符串。因此，当选中复选框2和4时，结果将是：“3,8” 城堡谷仓餐厅酒吧我在这里勾选了：但没有示例说明如何根据其名称选择checkboxgroup 我该怎么做呢？在jQuery中，只需使用一个属性选择器，如 $('input[name="locationthemes"]:checked'); 选择名为“locationthemes”的所有选中输入在瓦尼拉伊斯在ES6/spread操作符中

我想循环检查复选框组“locationthemes”，并用所有选定的值构建一个字符串。因此，当选中复选框2和4时，结果将是：“3,8”


城堡
谷仓
餐厅
酒吧

我在这里勾选了：但没有示例说明如何根据其名称选择checkboxgroup

我该怎么做呢？

在jQuery中，只需使用一个属性选择器，如

$('input[name="locationthemes"]:checked');

选择名为“locationthemes”的所有选中输入

在瓦尼拉伊斯

在ES6/spread操作符中

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

工作

或

使用jQuery的函数：

$('input:checkbox[name=locationthemes]').each(function() 
{    
    if($(this).is(':checked'))
      alert($(this).val());
});

使用jquery的

map

函数

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});

因此，所有这些都集中在一行：

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");

…一个关于选择器

[id*=“checkbox”]

的注释，它将抓取任何带有字符串“checkbox”的项目。这里有点笨拙，但如果您试图从.NET复选框列表之类的内容中提取所选的值，这会非常好。在这种情况下，“checkbox”将是您为CheckBoxList控件指定的名称。

映射数组是最快和最干净的

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

将以数组形式返回值，如：

array => [2,3]

假设城堡和谷仓已检查，而其他未检查。

$（“#locationthemes”）.prop（“已检查”）

使用jQuery获取所选复选框值
然后我们编写jQuery脚本，使用jQuery each（）在数组中获取选中的复选框值。使用这个jQuery函数，它运行一个循环来获取选中的值并将其放入数组中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Get Selected Checkboxes Value Using jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".btn").click(function() { var locationthemes = []; $.each($("input[name='locationthemes']:checked"), function() { locationthemes.push($(this).val()); }); alert("My location themes colors are: " + locationthemes.join(", ")); }); }); </script> </head> <body> <form method="POST"> <h3>Select your location themes:</h3> <input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" /> <label for="checkbox-1">Castle</label> <input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" /> <label for="checkbox-2">Barn</label> <input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" /> <label for="checkbox-3">Restaurant</label> <input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" /> <label for="checkbox-4">Bar</label> <br> <button type="button" class="btn">Get Values</button> </form> </body> </html>

使用jQuery获取所选复选框值 $（文档）.ready（函数（）{ $（“.btn”）。单击（函数（）{ var locationthemes=[]； $.each（$（$（输入[name='locationthemes']：选中）），函数（）{ locationthemes.push（$（this.val（））； }); 警报（“我的位置主题”颜色为：“+locationthemes.join（“，”）”）； }); }); 选择您的位置主题：城堡谷仓餐厅酒吧获取价值
Jquery 3.3.1，在单击按钮时获取所有选中复选框的值

$（文档）.ready（函数（）{ $（“.btn提交”）。单击（函数（）{ $（'.cbCheck:checkbox:checked'）。每个（函数（）{ 警报（$（this.val（）） }); }); }); 我有一辆自行车我有一辆车我有一条船更现代的方法： const selectedValues = $('input[name="locationthemes"]:checked').map( function () { return $(this).val(); }) .get() .join(', '); 我们首先找到具有给定名称的所有选中复选框，然后jQuery的map（）对每个复选框进行迭代，对其调用回调以获取值，并将结果作为新的jQuery集合返回，该集合现在保存复选框值。然后我们调用get（）获取一个值数组，然后join（）将它们连接成一个字符串，然后将其分配给常量selectedValues。我的朋友，你是一个救生员。特别是我喜欢使用控制台日志的想法。谢谢。在本例中，checkboxName应该是“locationthemes”，如何将此结果分配到变量这应该是注释，请在回答时提供解释。升级：var voyageIds=$（'input[name=“voyageId[]”：checked:enabled'）。map（function（）{return this.value；}）。get（）这很有用@mike var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(","); var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; }) array => [2,3] var voyageId = new Array(); $("input[name='voyageId[]']:checked:enabled").each(function () { voyageId.push($(this).val()); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Get Selected Checkboxes Value Using jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".btn").click(function() { var locationthemes = []; $.each($("input[name='locationthemes']:checked"), function() { locationthemes.push($(this).val()); }); alert("My location themes colors are: " + locationthemes.join(", ")); }); }); </script> </head> <body> <form method="POST"> <h3>Select your location themes:</h3> <input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" /> <label for="checkbox-1">Castle</label> <input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" /> <label for="checkbox-2">Barn</label> <input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" /> <label for="checkbox-3">Restaurant</label> <input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" /> <label for="checkbox-4">Bar</label> <br> <button type="button" class="btn">Get Values</button> </form> </body> </html> var SlectedList = new Array(); $("input.yorcheckboxclass:checked").each(function() { SlectedList.push($(this).val()); }); const selectedValues = $('input[name="locationthemes"]:checked').map( function () { return $(this).val(); }) .get() .join(', ');