Question

这是我序列化表单数据的方式，

$(document).ready(function(){
  $("button").click(function(){
    $("#result").text($("form").serialize());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="">
<div>
  <input type="text" name="FirstId" value="01">
  <input type="checkbox" name="SecondId" value="9">
</div>
<div>
  <input type="text" name="FirstId" value="02">
  <input type="checkbox" name="SecondId" value="8">
  </div>
</form>

<button>Serialize form values</button>

<div id="result"></div>

我想做的是仅通过选中复选框来获取价值。
例如，我想变得像

{第一个ID：01，第二个ID：9}

仅当选中第一个复选框时。

如果两个复选框都选中，我想得到

{FirstId：01，SecondId：9}，{FirstId：02，SecondId：8}

注意：
我只想使用.serialize()方法，而不是.serializeJSON()。

Answer 1

仅当表单中的输入值具有name属性时，才使用它们。要执行您想做的事情，我建议根据复选框的值删除或设置先前输入的名称。

但是，仅使用serialize()函数就无法以想要的返回值（JSON）的方式，因为它以application/x-www-form-urlencoded的方式序列化了表单。

这是两个解决方案。

这与serialize()并没有完全返回您想要的

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){

      $("button").click(function() {
        $("#result").text($("form").serialize());
      });
      
      $("input[type=\"checkbox\"]").change(function() {
        if (this.checked) {
          $(this).prev().attr("name", "FirstId");
        } else {
          $(this).prev().removeAttr('name');
        }
      });
      
    });
    </script>
    </head>
    <body>

    <form action="">
    <div>
      <input type="text" value="01">
      <input type="checkbox" name="SecondId" value="9">
    </div>
    <div>
      <input type="text" value="02">
      <input type="checkbox" name="SecondId" value="8">
      </div>
    </form>

    <button>Serialize form values</button>

    <div id="result"></div>

    </body>
    </html>

不带serialize()的那个可以准确返回您想要的内容。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

  $("button").click(function() {
    let result = [];

    $("input:checked").each(function () {
        let obj = {};
        obj[$(this).prev().attr("name")] = $(this).prev().val();
        obj[$(this).attr("name")] = $(this).val();
        result.push (obj);
    });

    $("#result").text(JSON.stringify(result));
  });
  
});
</script>
</head>
<body>

<form action="">
<div>
  <input type="text" name="FirstId" value="01">
  <input type="checkbox" name="SecondId" value="9">
</div>
<div>
  <input type="text" name="FirstId" value="02">
  <input type="checkbox" name="SecondId" value="8">
  </div>
</form>

<button>Serialize form values</button>

<div id="result"></div>

</body>
</html>

仅在Javascript的Form序列化上获得选定的值

1 个答案: