我正在学习网络开发，遇到一个问题。我的表单中有四个复选框，我需要捕获选中复选框的状态。另外，我需要将选中的复选框 id 发送到 REST 服务，在其中我需要对每个选中的复选框执行不同的操作。
以下是我到目前为止所做的事情。
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" class = "checkBoxProp" id = "1" name="checkBoxProp" value="1">Graph1<br>
<input type="checkbox" class = "checkBoxProp" id = "2" name="checkBoxProp" value="2">Graph2<br>
<input type="checkbox" class = "checkBoxProp" id = "3" name="checkBoxProp" value="3">Graph3<br>
<input type="checkbox" class = "checkBoxProp" id = "4" name="checkBoxProp" value="4">Graph4<br>
<input id="btnGetResponse" type="button" value="ClickMe!"/>
</form>
<div> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnGetResponse").click(function()
{
var ids = []; // empty array
$('.checkBoxProp:checked').each(function() {
ids.push($(this).val()); // returning the value of the current element of all the elements selected
});
console.log(JSON.stringify(ids.join()));
$.ajax({
type: "POST",
url: "http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes",
data: JSON.stringify(ids.join()) ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response)
{
sessionStorage.setItem(1, response);
window.location.href = "../backbonetest/dashboardUI.html";
},
failure: function(response)
{
alert('fail');
}
});
})
我上面所做的是首先选择所有选中的复选框并将它们插入一个数组中，然后使用join()将其转换为完整的字符串，然后将其转换为JSON并发送。
例如，如果选中第一个和第三个复选框，则发送的值采用格式
“1,3” 到我的休息服务。现在，由于复选框的数据完全以字符串格式发送，因此在 REST 服务中，我必须解析/拆分该字符串 (,)，然后执行必要的操作。在休息时我想要类似的东西
if (firstcheckbox selected) // do something
if(secondcheckbox selected)// do something
问题:我是不是把事情搞得太复杂了。我是否真的需要将所有复选框放入一个数组中，即使是，那么我是否需要使用 join() 然后 stringify 将其发送到其余服务。我能否找到一种方法，无需在 REST 服务中解析/拆分发送的字符串即可获取所有选中的复选框 ID。我对这一切都很陌生。请指导我。
最佳答案
- 使用
jQueryObject.map获取checked复选框值 - 正如您所定义的
contentType如"application/json; charset=utf-8"，不需要stringify内容。 - 有一个
key对于data对象，以便服务器可以使用指定的key访问数据
$("#btnGetResponse").click(function() {
var ids = $('.checkBoxProp:checked').map(function() {
return this.value;
}).get();
console.log(JSON.stringify(ids.join()));
$.ajax({
type: "POST",
url: "http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes",
data: {
ids: ids
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
sessionStorage.setItem(1, response);
window.location.href = "../backbonetest/dashboardUI.html";
},
failure: function(response) {
alert('fail');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<input type="checkbox" class="checkBoxProp" id="1" name="checkBoxProp" value="1">Graph1
<br>
<input type="checkbox" class="checkBoxProp" id="2" name="checkBoxProp" value="2">Graph2
<br>
<input type="checkbox" class="checkBoxProp" id="3" name="checkBoxProp" value="3">Graph3
<br>
<input type="checkbox" class="checkBoxProp" id="4" name="checkBoxProp" value="4">Graph4
<br>
<input id="btnGetResponse" type="button" value="ClickMe!" />
</form>关于javascript - 如何捕获复选框输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38058876/