首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

jQuery 表單元素取值賦值完全指南(Radio、Checkbox、Input、Select)

     編輯:PHP 綜合知識

單選框

// 獲取選中值
$("input[name='name']:checked").val();

// 獲取選中項的下一個元素文本
$("input[name='name']:checked").next().text();

輸入框

// 獲取值
$('#id').val();

// 設置值
$('#id').val('new value');

複選框

// 判斷是否勾選 (jQuery 1.6+ 推薦用 prop)
$("#id:checkbox").prop("checked"); // true/false

// 獲取值
$("#id").val();

// 設置勾選狀態
$("#chk1").prop("checked", false); // 取消勾選
$("#chk2").prop("checked", true);  // 勾選

// 判斷是否已勾選
if ($("#chk1").prop('checked')) { ... }

文本框/文本域

// 清空
$("#txt").val('');

// 填充
$("#txt").val('11');

下拉框

// 獲取選中的 value
$("#ddlRegType").val();

// 獲取選中的 text
$("#ddlRegType").find("option:selected").text();

// 獲取選中索引
$("#ddlRegType").get(0).selectedIndex;

// 設置選中 value
$("#ddlRegType").val("Normal");

// 設置選中索引
$("#ddlRegType").get(0).selectedIndex = index;

// 根據 text 設置選中
var count = $("#ddlRegType option").length;
for (var i = 0; i < count; i++) {
    if ($("#ddlRegType").get(0).options[i].text == text) {
        $("#ddlRegType").get(0).options[i].selected = true;
        break;
    }
}
// 或簡寫
$("#select_id option[text='jQuery']").prop("selected", true);

動態操作 Select 選項

// 添加選項
$("#select_id").append("<option value='Value'>Text</option>");
// 前置插入
$("#select_id").prepend("<option value='0'>請選擇</option>");

// 刪除最後一項
$("#select_id option:last").remove();
// 刪除索引為 0 的項
$("#select_id option[index='0']").remove();
// 刪除 value=3 的項
$("#select_id option[value='3']").remove();
// 刪除 text='4' 的項
$("#select_id option[text='4']").remove();

// 清空所有選項
$("#ddlRegType").empty();

單選組按 value 設置選中

$("input[type=radio]").val(['2']); // 設置 value=2 的項為選中

通用表單元素獲取

$("input").val();      // input, select, textarea 的 value
$("textarea").val();   // textarea 內容
$("select").val();     // select 選中值
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved