jQuery 表單元素取值與賦值完全手冊：input、select、radio、checkbox、textarea、iframe 實戰

jQuery 表單元素取值與賦值完全手冊：input、select、radio、checkbox、textarea、iframe 實戰

jQuery 簡化了 DOM 操作，但不同表單元素的取值/賦值 API 有差異（.val() vs .html() vs .attr()）。本文整理最全速查表，含 jQuery 1.3+ 版本的 radio/checkbox 最佳實踐、動態操作 select/iframe 技巧。

一、核心取值方法對照表

二、Radio 單選框：取值與賦值最佳實踐（jQuery 1.3+）

// ❌ 舊版寫法（jQuery 1.2，已廢棄 @ 符號）
// $("input[@type=radio][@checked]")

// ✅ 正確取值：獲取當前選中的 value
var sex = $("input[name='gender']:checked").val();

// ✅ 正確賦值：根據後端返回值設置選中項
var backendSex = "female";  // 假設後端返回 "female"
$("input[name='gender']").each(function() {
    if (this.value === backendSex) {
        $(this).prop("checked", true);  // jQuery 1.6+ 建議用 prop
        return false;  // 跳出 each 循環
    }
});

// 或者一行式（借用 val() 設置，需確保 value 唯一）
$("input[name='gender']").val([backendSex]);  // jQuery 允許數組賦值匹配

關鍵點：jQuery 1.6+ 区分 attr()（HTML 屬性）與 prop()（DOM 屬性），checked、selected、disabled 必須用 prop()。

三、Checkbox 複選框：批量操作

// 獲取所有選中的值（數組）
var hobbies = $("input[name='hobby']:checked").map(function() {
    return this.value;
}).get();  // ["reading", "swimming"]

// 全選/反選
$("#checkAll").click(function() {
    $("input[name='hobby']").prop("checked", this.checked);
});

// 判斷是否至少選中一項
if ($("input[name='hobby']:checked").length === 0) {
    alert("請至少選擇一項愛好");
}

四、Select 下拉框：動態操作

// 獲取選中項的 value / text
var val = $("#city").val();
var txt = $("#city option:selected").text();

// 設置選中項（按 value）
$("#city").val("beijing");

// 動態添加選項
$("#city").append("上海");

// 清空並重新加載（AJAX 回調典型場景）
$("#city").empty().append("請選擇");
$.each(data, function(i, item) {
    $("#city").append("" + item.name + "");
});

五、Iframe 跨域與同域操作

// 同域：修改 src 參數
$("#myFrame").attr("src", $("#myFrame").attr("src") + "&uid=" + uid);

// 同域：父頁面訪問 iframe 內部 DOM
var iframeDoc = $("#myFrame")[0].contentDocument || $("#myFrame")[0].contentWindow.document;
var innerVal = $(iframeDoc).find("#innerInput").val();

// 跨域：需使用 postMessage（HTML5）
// 父頁面發送
document.getElementById("myFrame").contentWindow.postMessage({type: "getData"}, "*");
// iframe 內監聽
window.addEventListener("message", function(e) {
    if (e.data.type === "getData") {
        e.source.postMessage({data: $("#secret").val()}, e.origin);
    }
});

六、表單元素通用屬性操作速查

七、版本兼容性提醒

• jQuery 1.6+：嚴格區分 attr() / prop()，布爾屬性必用 prop()。
• jQuery 3.0+：移除舊版兼容代碼，:checked、:selected 選擇器性能提升。
• IE8 及以下：需引入 jQuery 1.12.x 版本，不支援 2.x/3.x。