JQuery simple et facile à comprendre : formulaires HTML et jQuery-tutoriel HTML-php.cn

Table des matières

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

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

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

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

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

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

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

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

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

选择所有表单元素

Maison

interface Web

tutoriel HTML

JQuery simple et facile à comprendre : formulaires HTML et jQuery

王林

Aug 27, 2023 pm 04:17 PM

jquery：jquery formulaire html : formulaire html Simple et compréhensible : simplifié et compréhensible

<p>

JQuery simple et facile à comprendre : formulaires HTML et jQuery

</p> <p></p>

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

<p>À 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. </p> <p></p>

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

Copier après la connexion

<p>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. </p>

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

Copier après la connexion

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

<p>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. </p>

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

Copier après la connexion

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

<p>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 . </p>

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

Copier après la connexion

<p>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. </p>

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

Copier après la connexion

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

<p>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. </p>

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

Copier après la connexion

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

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

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

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

Copier après la connexion

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

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

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

Copier après la connexion

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

<p>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 </p>, 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>

Copier après la connexion

<p>Définir/obtenir les options sélectionnées de l'élément sélectionnéval() 方法，您可以通过向 val() 方法传递一个表示分配给 <option 的值的字符串来设置 <code><select> 元素的选定值> </p>À l'aide de la méthode <p>, vous pouvez définir la valeur sélectionnée de l'élément <select> en passant à la méthode <select> 元素的值，请再次使用 val() 方法来确定选择哪个选项。此场景中的 val() une chaîne représentant la valeur attribuée à l'élément <option>. </p>

Pour obtenir la valeur de l'élément <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. <p>

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

Copier après la connexion

val() 方法，我们可以通过向 val() </p>Définir/obtenir les options sélectionnées des éléments à sélection multiple<p> val()À l'aide de la méthode </p>, 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

<textarea>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. <p>

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

Copier après la connexion

val() 方法传递一个要用作文本的文本字符串来设置 <textarea> 元素的文本节点内容。为了获取 <textarea> 元素的值，我们再次使用 val() </p>Définir/obtenir le texte contenu dans

Vous pouvez définir le contenu du nœud de texte d'un élément <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 </p>, 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>

Copier après la connexion

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

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. <p>

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

Copier après la connexion

$('输入:复选框') </p>É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>');

Copier après la connexion

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

选择所有表单元素

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

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

Copier après la connexion

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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7465

Tutoriel CakePHP

1376

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

See all articles