Skip to content

Files

Latest commit

wizardforcelwizardforcel
2022-01-09 00:06:45
Jan 8, 2022
788443c · Jan 8, 2022

History

History
502 lines (422 loc) · 13.8 KB

06.md

File metadata and controls

502 lines (422 loc) · 13.8 KB

五、HTML 表单

禁用/启用表单元素

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

样本:sample51.html

<!DOCTYPE html>
<html lang="en">
<body>
    <input name="button" type="button" id="button" value="Click
me"/>
    <script src="http://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() 将禁用的属性值设置为空。

样本:sample52.html

<!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，选择和确定(布尔值)表单元素是禁用还是启用相当容易。请检查下面的代码以获得澄清。

样本:sample53.html

<!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来选择单选按钮输入或复选框。

样本:sample54.html

<!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属性值设置为空字符串。

样本:sample55.html

<!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()方法来实现的。

样本:sample56.html

<!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过滤器的几种用法。

样本:sample57.html

<!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过滤器的几种用法。

样本:sample58.html

<!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()方法提醒该值。

样品:59.html 样品

<!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()方法传递代表分配给<option>元素的值的字符串来设置<select>元素的选定值。

要获得<select>元素的值，再次使用val()方法确定选择了哪个选项。这种情况下的val()方法将返回所选选项的属性值。

样本:sample60.html

<!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()方法来检索所选选项的数组。该数组将包含所选选项的值属性。

样本:sample61.html

<!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>

设置/获取一个<textarea>内包含的文本

您可以通过传递val() 方法一个用作文本的文本字符串来设置<textarea>元素的文本节点内容。为了获得<textarea>元素的值，我们再次使用val()方法来检索包含在其中的文本。

样本:sample62.html

<!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()方法传递文本字符串来设置按钮元素的值属性。要获取按钮元素的值，再次使用val()方法检索文本。

样本:sample63.html

<!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 使得一些与编辑 select 元素相关的常见任务变得微不足道。下面是一些带有代码示例的任务。

// 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 muli-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>');

按类型选择表单元素

可以根据类型选择表单元素，例如$('input:checkbox')。jQuery 提供了以下表单类型过滤器，用于按类型选择表单元素。

  • :文本
  • :密码
  • :收音机
  • :复选框
  • :提交
  • :图像
  • :重置
  • :文件
  • :按钮

选择所有形态元素

您可以使用:input表单过滤器选择所有表单元素。该过滤器将选择不仅仅是输入元素，它还将选择任何<textarea>、<select>或<button>元素。在下面的代码示例中，注意使用:input过滤器时包装器的长度。

样本:sample64.html

<!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>