我正在学习Web开发，但遇到了一个问题。我的表单中有四个复选框，我需要捕获已选中复选框的状态。另外，我需要将选中的复选框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"为“我的休息服务”。现在，由于checkbox的数据完全以字符串格式发送，因此在REST服务中，我将不得不解析/分割此字符串(,)，然后执行必要的操作。在REST上，我想要任何类似的东西
if (firstcheckbox selected) // do something
if(secondcheckbox selected)// do something
问题：我不是把事情复杂化了。我是否真的需要将所有复选框都放在一个数组中，即使是，那么我是否需要使用join()然后进行字符串化以将其发送到其余服务。我可以找到一种方法，不需要在REST服务中解析/拆分已发送的字符串来获取所有选中的复选框ID。我是这一切的新手。请指导我。
jQueryObject.map获得checked的复选框值contentType那样"application/json; charset=utf-8"，不需要stringify内容。keyfordata对象，以便服务器可以使用指定的对象访问数据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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句