簡潔易懂的jQuery：HTML表單與jQuery-html教學-PHP中文網

簡潔易懂的jQuery：HTML表單與jQuery

停用/啟用表單元素

使用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() 方法傳遞一個表示指派給<option 的值的字串來設定<option 的值的字符串来设置 <code><select> 元素的選定值> 元素。

要取得 <select> 元素的值，請再次使用 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>

登入後複製

設定/取得<textarea>中包含的文字

您可以透過向 val() 方法傳遞一個要用作文字的文字字串來設定 <textarea> 元素的文字節點內容。為了取得 <textarea> 元素的值，我們再次使用 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 表单过滤器选择所有表单元素。此过滤器不仅会选择输入元素，还会选择任何 <textarea>、<select> 或 <button> 元素。在下面的编码示例中，请注意使用 :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的詳細內容。更多資訊請關注PHP中文網其他相關文章！