jQuery以形式输出所有输入值

这段简洁的 jQuery 代码片段演示了如何获取指定 ID 表单内所有输入元素的值。 你可以同时获取属性名称和值。

console.log("----------------------------------");
$('#form-id > input,#form-id > textarea').each(function(index) {
    console.log($(this).attr('name') + " = " + $(this).val());
});
console.log("----------------------------------");

注意：console.log() 命令仅适用于 Firebug 等浏览器调试工具。

jQuery 获取表单输入值常见问题解答

如何使用 jQuery 获取文本输入框的值？

使用 jQuery 的 .val() 方法即可获取文本输入框的值。此方法返回所选元素的值。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});

点击按钮后，将弹出 ID 为“test”的输入元素的值。

如何使用 jQuery 设置文本输入框的值？

同样使用 .val() 方法设置文本输入框的值。 此方法用于设置所有匹配元素的值。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").val("Hello World");
  });
});

点击按钮后，ID 为“test”的输入元素的值将被设置为“Hello World”。

如何使用 jQuery 获取特定表单中的所有输入值？

使用 .serialize() 方法获取特定表单中的所有输入值。此方法会创建一个 URL 编码的文本字符串，其中包含表单的值。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    alert($("form").serialize());
  });
});

点击按钮后，将弹出表单中所有元素的值，以 URL 编码的文本字符串形式呈现。

如何使用 jQuery 将输入值输出到控制台？

结合 .val() 方法和 console.log() 方法即可将输入值输出到控制台。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    console.log($("#test").val());
  });
});

点击按钮后，ID 为“test”的输入元素的值将记录到控制台。

如何使用 jQuery 获取下拉列表中所选项的值？

使用 .val() 方法获取下拉列表中所选项的值。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    alert($("#mySelect").val());
  });
});

点击按钮后，将弹出 ID 为“mySelect”的下拉列表中所选项的值。

如何使用 jQuery 设置下拉列表中所选项的值？

同样使用 .val() 方法设置下拉列表中所选项的值。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#mySelect").val("Option2");
  });
});

点击按钮后，ID 为“mySelect”的下拉列表中所选项的值将被设置为“Option2”。

如何使用 jQuery 获取复选框的值？

使用 .prop() 方法和 .val() 方法获取复选框的值。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    if($("#myCheck").prop("checked")){
      alert($("#myCheck").val());
    }
  });
});

点击按钮后，如果 ID 为“myCheck”的复选框被选中，则会弹出其值。

如何使用 jQuery 设置复选框的值？

使用 .prop() 方法设置复选框的值。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#myCheck").prop("checked", true);
  });
});

点击按钮后，ID 为“myCheck”的复选框将被选中。

如何使用 jQuery 获取单选按钮的值？

使用 :checked 选择器和 .val() 方法获取单选按钮的值。示例如下：

console.log("----------------------------------");
$('#form-id > input,#form-id > textarea').each(function(index) {
    console.log($(this).attr('name') + " = " + $(this).val());
});
console.log("----------------------------------");

点击按钮后，将弹出名称为“myRadio”的选中单选按钮的值。

如何使用 jQuery 设置单选按钮的值？

使用 .prop() 方法设置单选按钮的值。示例如下：

$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});

点击按钮后，名称为“myRadio”的单选按钮将被选中。(注意：这会选中第一个匹配的单选按钮，如果需要选中特定值，需要更精确的选择器。)

以上是jQuery以形式输出所有输入值的详细内容。更多信息请关注PHP中文网其他相关文章！