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中文網其他相關文章！