Question

我正在学习网页开发，但我遇到了一个问题。我的表单中有四个复选框，我需要捕获已选中复选框的状态。此外，我需要将已选中的复选框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服务中，我必须解析/拆分此字符串(,)，然后执行必要的操作。在REST，我想要像

这样的东西

if (firstcheckbox selected) // do something
if(secondcheckbox selected)// do something

问题：我没有过于复杂的事情。我是否真的需要将所有复选框放在一个数组中，即使是，然后我需要使用join()然后stringify将其发送到其余服务。我可以找到一种方法，我不需要在我的REST服务中解析/拆分已发送的字符串，以获取所有已选中的复选框ID。我是这一切的新手。请指导我。

Answer 1

使用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>

如何捕获复选框输入

1 个答案: