这就是我序列化表单数据的方式,
$(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/