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 技術將表單數據提交到後台服務器進行處理,進一步提高開發效率和網頁瀏覽者合理化體驗。