jQuery 控制表單元素
取值及設置 radio, checkbox, select 操作,簡單的透過 jQuery :checked 取得 Html <form> 表單元素 achieved 資料,獲取 Radio 單選框的選取值與 Checkbox 多選框的選取值方法及設定值的方法。
取得 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> 值的設置
添加一個 <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();