javascript - 在 Javascript 的表单序列化上只获取选定的值

标签 javascript forms serialization

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

$(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>

我想做的是我只想通过选中的复选框获得值(value)。
例如,我想得到像

{FirstId: 01, SecondId: 9}

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

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

{FirstId: 01, SecondId: 9} , {FirstId: 02, SecondId: 8}

注意:
我只想使用 .serialize() 方法,而不是 .serializeJSON()

最佳答案

表单中的输入值只有在具有 name 属性时才会被使用。为了做你想做的事,我建议根据复选框的值删除或设置先前输入的名称。

但您想要返回值(JSON 格式)的方式仅使用 serialize() 函数是不可能的,因为它序列化了 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 - 在 Javascript 的表单序列化上只获取选定的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57672528/

相关文章:

jquery - .serialize() 和 .serializeArray() 有什么区别?

javascript - 摆脱选择选项中的未定义

javascript - jquery-在键盘上按下后续按钮时将文本输入到文本框/文本区域

html - CSS HTML 从屏幕右侧隐藏一个字段

c# - json.net 在序列化和反序列化一个非常简单的类时抛出错误

kotlin - 如何使用 kotlinx 序列化使用 open val 序列化 kotlin 密封类

javascript - 使用 Mongoose 插入文档时出现问题

javascript - 为什么我们在 `Number.prototype.valueOf` 函数内部使用 `map()`

javascript - 为什么javascript中的nextSibling方法不能正常工作

javascript - 如何在没有任何框架代码的情况下使用 JavaScript 选择自定义选择组件的选项?