Maison > Article > interface Web > JQuery simple et facile à comprendre : formulaires HTML et jQuery

JQuery simple et facile à comprendre : formulaires HTML et jQuery

王林original: 2023-08-27 16:17:061215parcourir

<p></p>

Désactiver/activer les éléments de formulaire

À l'aide de jQuery, vous pouvez facilement désactiver un élément de formulaire en définissant sa valeur d'attribut désactivé sur désactivé. Pour ce faire, nous sélectionnons simplement une entrée et, en utilisant la méthode attr(), définissons la propriété désactivée de l'entrée sur la valeur désactivée.

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

Pour activer un élément de formulaire désactivé, nous utilisons simplement removeAttr() pour supprimer l'attribut désactivé, ou utilisons removeAttr() 删除禁用的属性，或使用 attr() pour définir la valeur de l'attribut désactivé sur null.

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

Comment déterminer si un élément de formulaire est désactivé ou activé

Utilisez les expressions de filtre de formulaire jQuery :disabled 或 :enabled, pour sélectionner et déterminer facilement (booléen) si un élément de formulaire est désactivé ou activé. Vérifiez le code ci-dessous pour plus de précisions.

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

Sélectionnez/décochez des cases individuelles ou des boutons radio

Vous pouvez sélectionner une entrée de bouton radio ou une case à cocher en définissant son attribut checked sur true en utilisant 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>

Pour décocher une entrée de bouton radio ou une case à cocher, utilisez simplement la valeur de l'attribut removeAttr() 方法删除选中的属性或将 checked définie sur une chaîne vide.

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

Sélectionnez/décochez plusieurs cases à cocher ou entrées de boutons radio

Vous pouvez le faire en utilisant la méthode val() 将输入设置为选中。这是通过向 val() de jQuery sur plusieurs entrées de case à cocher ou de boutons radio en passant un tableau contenant une chaîne cohérente avec l'attribut de valeur d'entrée de case à cocher ou de bouton radio.

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

Remarque : L'utilisation de val() n'effacera pas l'élément de saisie si la case à cocher ou le bouton radio est coché.

Déterminez si une case à cocher ou un bouton radio est coché ou décoché

Nous pouvons utiliser le filtre :checked 表单过滤器来确定复选框输入或单选按钮输入是否被选中或清除。检查下面的代码以了解 :checked de plusieurs manières.

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

Comment déterminer si un élément de formulaire est masqué

Vous pouvez utiliser :hidden 表单过滤器确定表单元素是否隐藏。检查下面的代码以了解 :checked plusieurs utilisations des filtres.

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

Définir/obtenir la valeur de l'élément d'entrée

val() 方法可用于设置和获取输入元素的属性值（按钮、复选框、隐藏、图像、密码、单选、重置、提交、文本）。下面，我在 val() 中设置每个输入的值，然后使用 val() Des méthodes peuvent être utilisées pour définir et obtenir les valeurs d'attribut des éléments d'entrée (bouton, case à cocher, masqué, image, mot de passe, radio, réinitialisation, soumission, texte). Ci-dessous, je définis la valeur de chaque entrée dans

, puis j'utilise la méthode

pour alerter sur cette valeur.

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

Définir/obtenir les options sélectionnées de l'élément sélectionnéval() 方法，您可以通过向 val() 方法传递一个表示分配给 <option><select></select></option> 元素的选定值>

À l'aide de la méthode

, vous pouvez définir la valeur sélectionnée de l'élément <select></select> en passant à la méthode <select></select> 元素的值，请再次使用 val() 方法来确定选择哪个选项。此场景中的 val() une chaîne représentant la valeur attribuée à l'élément <option></option>.

Pour obtenir la valeur de l'élément <select></select>, utilisez à nouveau la méthode

pour déterminer quelle option est sélectionnée. La méthode

dans ce scénario renverra la valeur d'attribut de l'option sélectionnée.

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

Définir/obtenir les options sélectionnées des éléments à sélection multiple

val()À l'aide de la méthode

, nous pouvons définir la valeur sélectionnée d'un élément à sélection multiple en passant un tableau contenant les valeurs correspondantes à la méthode

Pour obtenir l'option sélectionnée dans un élément à sélection multiple, nous utilisons à nouveau la méthode

pour récupérer le tableau des options sélectionnées. Le tableau contiendra l'attribut value de l'option sélectionnée.

<!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() 方法传递一个要用作文本的文本字符串来设置 <textarea></textarea> 元素的文本节点内容。为了获取 <textarea></textarea> 元素的值，我们再次使用 val()

Définir/obtenir le texte contenu dans

Vous pouvez définir le contenu du nœud de texte d'un élément <p></p> en transmettant une chaîne de texte à utiliser comme texte à la méthode val() 方法传递一个文本字符串来设置按钮元素的 value 属性。要获取按钮元素的值，请再次使用 val(). Pour obtenir la valeur de l'élément , nous utilisons à nouveau la méthode

pour récupérer le texte qu'il contient.

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

Définir/obtenir l'attribut value de l'élément bouton

Vous pouvez définir l'attribut value d'un élément bouton en passant une chaîne de texte à la méthode

. Pour obtenir la valeur de l'élément bouton, utilisez à nouveau la méthode

pour récupérer le texte.

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

$('输入:复选框')

Éléments de choix éditorial🎜 🎜jQuery rend triviales certaines tâches courantes liées à la modification des éléments de sélection. Vous trouverez ci-dessous certaines de ces tâches avec des exemples de codage. 🎜

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

🎜 🎜Sélectionnez les éléments du formulaire par type🎜 🎜 Les éléments de formulaire peuvent être sélectionnés par type, par exemple 🎜 jQuery fournit les filtres de type de formulaire suivants pour sélectionner les éléments de formulaire par type. 🎜

:text
:密码
:radio
:checkbox
:提交
:image
:重置
:file
:button

选择所有表单元素

您可以使用 :input 表单过滤器选择所有表单元素。此过滤器不仅会选择输入元素，还会选择任何 <textarea></textarea>、<select></select> 或 <button></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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery html checkbox 字符串 input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exécuter le script lorsque la barre de défilement de l'élément HTML défile ?Article suivant：Exécuter le script lorsque la barre de défilement de l'élément HTML défile ?

Articles Liés

Voir plus