


JQuery simple et facile à comprendre : formulaires HTML et jQuery

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éthodeattr()
, 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>
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>
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>
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 attributchecked
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>
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>
Sélectionnez/décochez plusieurs cases à cocher ou entrées de boutons radio
<p>Vous pouvez le faire en utilisant la méthodeval()
将输入设置为选中。这是通过向 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>
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>
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>
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é<!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 的值的字符串来设置 <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>
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>
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>
<!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>
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>
$('输入:复选框')
</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>');
: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>
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!

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.

Article chaud

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)

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

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

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

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.

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.

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

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

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.
