我想遍历checkboxgroup'locationthemes'并构建一个包含所有选定值的字符串。因此,当选中复选框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');
选择名称为“locationthemes”的所有选中输入
console.log($('input[name="locationthemes"]:checked').serialize());
//or
$('input[name="locationthemes"]:checked').each(function() {
console.log(this.value);
});
在VanillaJS
[].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));
var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
SlectedList.push($(this).val());
});
映射数组是最快最干净的。
var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })
将返回值作为数组,如:
array => [2,3]
假设城堡和谷仓被检查,其他人没有。
使用jquery的map
函数
var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
checkboxValues.push($(this).val());
});
$("#locationthemes").prop("checked")
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"]
的注意事项,它将抓取任何带有字符串“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>
var voyageId = new Array();
$("input[name='voyageId[]']:checked:enabled").each(function () {
voyageId.push($(this).val());
});