使用 jQuery 获取所选复选框的值
use jQuery to get values of selected checkboxes
我想遍历复选框组'位置主题'并构建一个包含所有选定值的字符串。因此,当选中复选框 2 和 4 时,结果将是:"3,8"
<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>
我在这里检查了:http://api.jquery.com/checked-selector/但没有示例如何按名称选择复选框组。
我该怎么做?
在jQuery中,只需使用属性选择器,例如
$('input[name="locationthemes"]:checked');
选择名称为"位置主题"的所有选中输入
console.log($('input[name="locationthemes"]:checked').serialize());
//or
$('input[name="locationthemes"]:checked').each(function() {
console.log(this.value);
});
演示
在香草JS中
[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
console.log(cb.value);
});
演示
在 ES6/扩展运算符中
[...document.querySelectorAll('input[name="locationthemes"]:checked')]
.forEach((cb) => console.log(cb.value));
演示
$('input:checkbox[name=locationthemes]:checked').each(function()
{
// add $(this).val() to your array
});
工作演示
或
使用 jQuery 的is()
函数:
$('input:checkbox[name=locationthemes]').each(function()
{
if($(this).is(':checked'))
alert($(this).val());
});
映射数组是最快和最干净的。
var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })
将返回值作为数组,如下所示:
array => [2,3]
假设城堡和谷仓被检查了,而其他人没有。
$("#locationthemes").prop("checked")
使用 jquery 的 map
函数
var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
checkboxValues.push($(this).val());
});
一种更现代的方法:
const selectedValues = $('input[name="locationthemes"]:checked').map( function () {
return $(this).val();
})
.get()
.join(', ');
我们首先找到所有具有给定名称的选定复选框,然后 jQuery 的 map() 遍历每个复选框,调用其回调以获取值,并将结果作为现在保存复选框值的新 jQuery 集合返回。然后,我们调用 get() 来获取一个值数组,然后 join() 将它们连接成一个字符串 - 然后将其分配给常量 selectedValues。
var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
SlectedList.push($(this).val());
});
You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();
所以都在一行中:
var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");
..关于选择器的说明 [id*="checkbox"]
,它将抓取任何带有字符串"复选框"的项目。 这里有点笨拙,但如果您尝试从 .NET CheckBoxList 之类的东西中提取所选值,这真的很好。 在这种情况下,"复选框"将是您为 CheckBoxList 控件指定的名称。
来源 - 更多详细信息
使用 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 3.3.1 ,在单击按钮时获取所有选中复选框的值
$(document).ready(function(){
$(".btn-submit").click(function(){
$('.cbCheck:checkbox:checked').each(function(){
alert($(this).val())
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="vehicle1" name="vehicle1" class="cbCheck" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" class="cbCheck" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" class="cbCheck" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit" class="btn-submit">
var voyageId = new Array();
$("input[name='voyageId[]']:checked:enabled").each(function () {
voyageId.push($(this).val());
});
- 如何选中复选框jquery
- 基于复选框 Jquery 更新文本框
- 复选框组获取选中复选框jquery的值
- 自定义CSS复选框jQuery诱导的“;“已检查”;属性不't在视觉上”;“检查”;复选框
- 多复选框jquery计算
- 如何使用复选框jQuery取消选中并刷新数据
- 选中/取消选中所有子复选框 jquery 引导程序
- 不要禁用选中的复选框 jQuery
- 使用“下拉列表多选复选框”(jquery)创建动态表
- 点击链接时勾选复选框 - jquery
- 轻松限制选中的复选框 jquery UI
- 显示/隐藏嵌套复选框-jQuery
- 使用选中父复选框.jQuery
- 事件处理复选框-jQuery icheck插件
- 多个复选框jquery手动点击复选框触发,但代码点击'一个没有# 39;t
- 复选框jQuery出现意外响应
- 动态地生成/删除文本输入与复选框jQuery
- :空白选择器不工作复选框jQuery Validate()
- 如何对选中的值求和更改复选框jquery
- 复选框jquery或javascript oncheck