<!doctype html><html lang=en><body> <input name=button type=button id=button value=click me> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function ($) { $('#button') .attr('disabled', 'disabled'); })(jquery); </script></body></html>
要启用禁用的表单元素，我们只需使用 removeattr() 删除禁用的属性，或使用 attr() 将禁用的属性值设置为空。
<!doctype html><html lang=en><body> <input name=button type=button id=button value=click me disabled=disabled> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function($){ $('#button').removeattr('disabled'); // or // $('#button').attr('disabled', ''); })(jquery); </script></body></html>
如何确定表单元素是禁用还是启用使用 jquery 表单过滤器表达式 :disabled 或 :enabled, 可以很容易地选择和确定（布尔值）表单元素是否被禁用或启用。检查下面的代码以进行澄清。
<!doctype html><html lang=en><body> <input name=button type=button id=button1> <input name=button type=button id=button2 disabled=disabled> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function ($) { // is it enabled? alert($('#button1').is(':enabled')); // alerts true // or, using a filter alert($('#button1:enabled').length); // alerts 1 // is it disabled? alert($('#button2').is(':disabled')); // alerts true // or, using a filter alert($('#button2:disabled').length); // alerts 1 })(jquery); </script></body></html>
选择/清除单个复选框或单选按钮您可以通过使用 attr() 将其 checked 属性设置为 true 来选择单选按钮输入或复选框。
<!doctype html><html lang=en><body> <input name= value= type=checkbox> <input name= value= type=radio> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function($){ // set all check boxes or radio buttons to selected $('input:checkbox,input:radio').attr('checked', 'checked'); })(jquery); </script></body></html>
要清除单选按钮输入或复选框，只需使用 removeattr() 方法删除选中的属性或将 checked 属性值设置为空字符串即可。
<!doctype html><html lang=en><body> <input name= type=checkbox value=test1 checked=checked> <input name= type=radio value=test2 checked=checked> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function($){ $('input').removeattr('checked'); })(jquery); </script></body></html>
选择/清除多个复选框或单选按钮输入您可以在多个复选框输入或单选按钮输入上使用 jquery 的 val() 将输入设置为选中。这是通过向 val() 方法传递一个数组来完成的，该数组包含与复选框输入或单选按钮输入值属性一致的字符串。
<!doctype html><html lang=en><body> <input type=radio value=radio1> <input type=radio value=radio2> <input type=checkbox value=checkbox1> <input type=checkbox value=checkbox2> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function($){ // check all radio and check box inputs on the page. $('input:radio,input:checkbox').val(['radio1', 'radio2', 'checkbox1', 'checkbox2']); // use explicit iteration to clear. // $('input:radio,input:checkbox').removeattr('checked'); // or // $('input:radio,input:checkbox').attr('checked', ''); })(jquery); </script></body></html>
注意：如果已选中复选框或单选按钮，则使用 val() 将不会清除输入元素。
确定复选框或单选按钮是否被选中或清除我们可以使用 :checked 表单过滤器来确定复选框输入或单选按钮输入是否被选中或清除。检查下面的代码以了解 :checked 过滤器的几种用法。
<!doctype html><html lang=en><body> <input checked=checked type=checkbox> <input checked=checked type=radio> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function($){ // alerts true alert($('input:checkbox').is(':checked')); // or, added to wrapper set if checked. alerts 1 alert($('input:checkbox:checked').length); // alerts true alert($('input:radio').is(':checked')); // or, added to wrapper set if checked. alerts 1 alert($('input:radio:checked').length); })(jquery); </script></body></html>
如何确定表单元素是否隐藏您可以使用 :hidden 表单过滤器确定表单元素是否隐藏。检查下面的代码以了解 :checked 过滤器的几种用法。
<!doctype html><html lang=en><body> <input type=hidden> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function ($) { // alerts true alert($('input').is(':hidden')); // or, added to wrapper set if hidden. alerts 1 alert($('input:hidden').length); })(jquery); </script></body></html>
设置/获取输入元素的值val() 方法可用于设置和获取输入元素的属性值（按钮、复选框、隐藏、图像、密码、单选、重置、提交、文本）。下面，我在 val() 中设置每个输入的值，然后使用 val() 方法提醒该值。
<!doctype html><html lang=en><body> <input type=button> <input type=checkbox> <input type=hidden> <input type=image> <input type=password> <input type=radio> <input type=reset> <input type=submit> <input type=text> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function ($) { $('input:button').val('i am a button'); $('input:checkbox').val('i am a check box'); $('input:hidden').val('i am a hidden input'); $('input:image').val('i am an image'); $('input:password').val('i am a password'); $('input:radio').val('i am a radio'); $('input:reset').val('i am a reset'); $('input:submit').val('i am a submit'); $('input:text').val('i am a text'); // alerts input's value attribute alert($('input:button').val()); alert($('input:checkbox').val()); alert($('input:hidden').val()); alert($('input:image').val()); alert($('input:password').val()); alert($('input:radio').val()); alert($('input:reset').val()); alert($('input:submit').val()); alert($('input:text').val()); })(jquery); </script></body></html>
设置/获取选择元素的选定选项使用 val() 方法，您可以通过向 val() 方法传递一个表示分配给 元素。
要获取 元素的值，请再次使用 val() 方法来确定选择哪个选项。此场景中的 val() 方法将返回所选选项的属性值。
<!doctype html><html lang=en><body> <select id=s name=s> <option value=option1>option one</option> <option value=option2>option two</option> </select> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function ($) { // set the selected option in the select element to option two $('select').val('option2'); // alerts option2 alert($('select').val()); })(jquery); </script></body></html>
设置/获取多选元素的选定选项使用 val() 方法，我们可以通过向 val() 方法传递一个包含相应值的数组来设置多选元素的选定值。
为了获取多选元素中的选定选项，我们再次使用 val() 方法来检索所选选项的数组。该数组将包含所选选项的值属性。
<!doctype html><html lang=en><body> <select size=4 multiple=multiple> <option value=option1>option one</option> <option value=option2>option two</option> <option value=option3>option three</option> <option value=option4>option four</option> </select> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function($){ // set the value of the selected options $('select').val(['option2', 'option4']); // get the selected values alert($('select').val().join(', ')); // alerts, option2, option4 })(jquery); </script></body></html>
设置/获取中包含的文本您可以通过向 val() 方法传递一个要用作文本的文本字符串来设置 元素的文本节点内容。为了获取 元素的值，我们再次使用 val() 方法来检索其中包含的文本。
<!doctype html><html lang=en><body> <textarea></textarea> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function ($) { // set the text contained within $('textarea').val('i am a textarea'); // alerts i am a textarea alert($('textarea').val()); })(jquery); </script></body></html>
设置/获取按钮元素的值属性您可以通过向 val() 方法传递一个文本字符串来设置按钮元素的 value 属性。要获取按钮元素的值，请再次使用 val() 方法来检索文本。
<!doctype html><html lang=en><body> <button>button</button> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function ($) { // set the value: <button value=i am a button element> $('button').val('i am a button element') // alerts i am a button element alert($('button').val()); })(jquery); </script></body></html>
编辑选择元素jquery 使一些与编辑选择元素相关的常见任务变得微不足道。以下是其中一些带有编码示例的任务。
// add options to a select element at the end$('select').append('<option value=>option</option>');// add options to the start of a select element$('select').prepend('<option value=>option</option>');// replace all the options with new options$('select').html('<option value=>option</option><option value=>option</option>');// replace items at a certain index using the :eq() selecting filter to// select the element, and then replace it with the .replacewith() method$('select option:eq(1)').replacewith('<option value=>option</option>');// set the select elements' selected option to index 2$('select option:eq(2)').attr('selected', 'selected');// remove the last option from a select element$('select option:last').remove();// select an option from a select element via its// order in the wrapper set using custom filters$('#select option:first');$('#select option:last');$('#select option:eq(3)');$('#select option:gt(5)');$('#select option:lt(3)');$('#select option:not(:selected)');// get the text of the selected option(s), this will return the text of// all options that are selected when dealing with a multi-select element$('select option:selected').text();// get the value attribute value of an option in a select element$('select option:last').val(); // getting the :last option element// get the index (0 index) of the selected option.// note: does not work with multi-select elements.$('select option').index($('select option:selected'));// insert an option after a particular position$('select option:eq(1)').after('<option value=>option</option>');// insert an option before a particular position$('select option:eq(3)').before('<option value=>option</option>');
按类型选择表单元素可以按类型选择表单元素，例如$('输入:复选框'). jquery 提供以下表单类型过滤器，用于按类型选择表单元素。
:text:密码:radio:checkbox:提交:image:重置:file:button选择所有表单元素您可以使用 :input 表单过滤器选择所有表单元素。此过滤器不仅会选择输入元素，还会选择任何 、 或 元素。在下面的编码示例中，请注意使用 :input 过滤器时包装器集的长度。
<!doctype html><html lang=en><body> <input type=button value=input button> <input type=checkbox> <input type=file> <input type=hidden> <input type=image> <input type=password> <input type=radio> <input type=reset> <input type=submit> <input type=text> <select> <option>option</option> </select> <textarea></textarea> <button>button</button> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script> (function($){ // alerts 13 form elements alert($(':input').length); })(jquery); </script></body></html>
以上就是简洁易懂的jquery：html表单与jquery的详细内容。