jQuery 控制表单元素

使用 jQuery 控制表单元素可以取值及设置 radio, checkbox, select 操作,简单的透过 jQuery :checked 取得 Html <form> 表单元素 achieved 资料,获取 Radio 单选框的选取值与 Checkbox 多选框的选取值方法及设定值的方法,并使用 jQuery 提供的方法对其进行操作。启用/停用表单元素元素 disabled 也可以动态控制输入元素的安排。

RADIO 单选框(单选组)

取得 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 复选框

取得 CHECKBOX 复选框选中的值,复选框可能多个值由 .each 找到 :checked 的元素并加入阵列中。

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

SELECT 下拉清单 回復

取得 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 表单项目 RadioCheckboxSelect 网页上的应用,可以针对表单元素的验证、检查 EMAIL 邮箱地址格式是否正确、检查 Password Strength 密码强度是否足够,JavaScriptAjaxjQuery 之间的关系、取得表单中的元素值的方法。可以简化网页开发中对 DOM 操作、事件处理、元素动画效果等方面的编程。使用 jQuery 可以轻松完成表单的提交和处理,例如透过 Ajax 非同步的 JavaScriptXML 技术将表单数据提交到后台服务器进行处理,进一步提高开发效率和网页浏览者合理化体验。