jQuery 控制表單元素

使用 jQuery 控制表單元素可以取值及設置 radio, checkbox, select 操作，簡單的透過 jQuery :checked 取得 Html <form> 表單元素 achieved 資料，獲取 Radio 單選框的選取值與 Checkbox 多選框的選取值方法及設定值的方法，並使用 jQuery 提供的方法對其進行操作。啟用/停用表單元素元素 disabled 也可以動態控制輸入元素的安排。

取得 RADIO 單選框選中的值，單選框只有一個值由 .each 找到 :checked 的元素。

var result = "";
$("input[type=radio]:checked").each(function () {
  result = $(this).val() ;
});

選取 RADIO 單選框的第二個元素(第一個元素為 [0])。

$("input[type=radio]")[1].checked = true;

取消選取 RADIO 單選框的元素，在此選取屬性 true 不適合可能會選取最後一個。

$("input[type=radio]").attr("checked",false);

取得 CHECKBOX 複選框選中的值，複選框可能多個值由 .each 找到 :checked 的元素並加入陣列中。

var c=[];
$("input[type=checkbox]:checked").each(function () {
  c.push($(this).val());
});
result = c.toString();

取得 SELECT 下拉清單選中的文字，由 .each 找到 :selected 的 <option> 元素。

$("div.dynamically select option:selected").each(function () {
  result = $(this).text();
});

取得 SELECT 下拉清單選中的值，由 .each 找到 :selected 的 <option> 元素的值。

$("div.dynamically select option:selected").each(function () {
  result = $(this).val();
});

控制表單元素 <select> 值的設置

網頁設計中表單 <select> 元素用來建立下拉式選單的 HTML 元素。透過 <select> 元素可以建立包含多個選項的下拉式選單，並且使用者可以選擇其中的一個選項。選項元素使用 <option> 元素來建立選單中的選項，可以使用 value 屬性來指定每個選項的值，並使用 selected 屬性來指定預設選擇的選項、multiple 屬性設置為 true 則允許使用者選擇多個選項。

添加一個 <option> 項目，添加於最後。

$("select").append("<option value='NEW'>Added</option>");

在前面插入一個 <option> 項目，添加於最前面。

$("select").prepend("<option value='NULL'>PLEASE SELECT</option>");

刪除第一個(索引值最小的) <option> 項目。

$("select option:first").remove();
$("select option:first-child").remove(); /* 影響全部符合的 select 元素 */

刪除最後一個(索引值最大的) <option> 項目。

$("select option:last").remove();
$("select option:last-child").remove(); /* 影響全部符合的 select 元素 */

刪除值為 Option by 2 的 <option> 項目。

$("select option[value='Option by 2']").remove();

清空 <select> 中全部的 <option> 項目。

$("select").empty();

jQuery Selectors Form 表單項目的選擇

HTML 表單項目 Radio、Checkbox、Select 網頁上的應用，可以針對表單元素的驗證、檢查 EMAIL 郵箱地址格式是否正確、檢查 Password Strength 密碼強度是否足夠，JavaScript、Ajax、jQuery 之間的關係、取得表單中的元素值的方法。可以簡化網頁開發中對 DOM 操作、事件處理、元素動畫效果等方面的編程。使用 jQuery 可以輕鬆完成表單的提交和處理，例如透過 Ajax 非同步的 JavaScript 與 XML 技術將表單數據提交到後台服務器進行處理，進一步提高開發效率和網頁瀏覽者合理化體驗。