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();