简洁易懂的jQuery：HTML表单与jQuery

百变鹏仔 4个月前 (09-22) #HTML

文章标签易懂

禁用/启用表单元素

使用jQuery，您可以通过将表单元素的disabled属性值设置为disabled来轻松禁用表单元素。为此，我们只需选择一个输入，然后使用 attr() 方法，将输入的禁用属性设置为禁用值。

<!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 提供以下表单类型过滤器，用于按类型选择表单元素。

选择所有表单元素

您可以使用 :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>

文章推荐