Maison interface Web js tutoriel Une façon intelligente d'écrire plusieurs zones de sélection dans des formulaires dans jquery_jquery

Une façon intelligente d'écrire plusieurs zones de sélection dans des formulaires dans jquery_jquery

May 16, 2016 pm 03:40 PM
多选框 表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("tbody>tr:odd").addClass("odd");
  $("tbody>tr:even").addClass("even");
  $('tbody>tr').click(function(){
    var hasSelected = $(this).hasClass('selected');
    $(this)[hasSelected &#63; "removeClass" : "addClass"]('selected').find(':checkbox').attr('checked', !hasSelected);
  });
  $('tbody>tr:has(:checked)').addClass('selected');
})
</script>
</head>
<body>
<table>
  <thead>
  <tr>
    <th></th>
    <th>s</th>
    <th>sd</th>
    <th>sdasdsa sda</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>s</td>
    <td>s</td>
    <td>sdadsadsd</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>sadasdsd</td>
    <td>s</td>
    <td>sads</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value="" checked='checked'/></td>
    <td>sas</td>
    <td>s</td>
    <td>aasdsad sad</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>ss</td>
    <td>ssad</td>
    <td>dadsadsad</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>Rain</td>
    <td>sd</td>
    <td>sdsad sad asd </td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>MAXMAN</td>
    <td>s</td>
    <td>实打实的速度是</td>
  </tr>
  </tbody>
</table>
</body>
</html>
Copier après la connexion

écriture radio :

$(function(){
  $("tbody>tr:odd").addClass("odd"); 
  $("tbody>tr:even").addClass("even"); 
  $('tbody>tr').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked', true);
  });
// $('table :radio:checked').parent().parent().addClass('selected');
  $('table :radio:checked').parents("tr").addClass('selected');
//$('tbody>tr:has(:checked)').addClass('selected');

})
Copier après la connexion

écriture de la case à cocher :

$(function(){
  $("tbody>tr:odd").addClass("odd");
  $("tbody>tr:even").addClass("even"); 
  $('tbody>tr').click(function(){
    if($(this).hasClass('selected')){
      $(this).removeClass('selected').find(':checkbox').attr('checked', false);
    }else{
      $(this).addClass('selected').find(':checkbox').attr('checked', true);
    }
  });
// $('table :checkbox:checked').parent().parent().addClass('selected');
  $('table :checkbox:checked').parents("tr").addClass('selected');
  //$('tbody>tr:has(:checked)').addClass('selected');
})
Copier après la connexion

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

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Comment implémenter le saut de page après la soumission du formulaire PHP Comment implémenter le saut de page après la soumission du formulaire PHP Aug 12, 2023 am 11:30 AM

Comment implémenter le saut de page après la soumission d'un formulaire PHP [Introduction] Dans le développement Web, la soumission de formulaire est une exigence fonctionnelle courante. Une fois que l'utilisateur a rempli le formulaire et cliqué sur le bouton d'envoi, les données du formulaire doivent généralement être envoyées au serveur pour traitement et l'utilisateur est redirigé vers une autre page après le traitement. Cet article explique comment utiliser PHP pour implémenter le saut de page après la soumission du formulaire. [Étape 1 : Formulaire HTML] Tout d'abord, nous devons écrire une page contenant un formulaire dans une page HTML afin que les utilisateurs puissent remplir les données qui doivent être soumises.

Comment utiliser JavaScript pour réaliser la fonction d'invite automatique du contenu de la zone de saisie du formulaire ? Comment utiliser JavaScript pour réaliser la fonction d'invite automatique du contenu de la zone de saisie du formulaire ? Oct 20, 2023 pm 04:01 PM

Comment utiliser JavaScript pour réaliser la fonction d'invite automatique du contenu de la zone de saisie du formulaire ? Introduction : La fonction d'invite automatique du contenu de la zone de saisie du formulaire est très courante dans les applications Web. Elle peut aider les utilisateurs à saisir rapidement le contenu correct. Cet article explique comment utiliser JavaScript pour réaliser cette fonction et fournit des exemples de code spécifiques. Créer la structure HTML Tout d'abord, nous devons créer une structure HTML contenant la zone de saisie et la liste de suggestions automatiques. Vous pouvez utiliser le code suivant : &lt;!DOCTYP

Comment gérer la gestion des droits des utilisateurs dans les formulaires PHP Comment gérer la gestion des droits des utilisateurs dans les formulaires PHP Aug 10, 2023 pm 01:06 PM

Comment gérer la gestion des droits des utilisateurs dans les formulaires PHP Avec le développement continu des applications Web, la gestion des droits des utilisateurs est l'une des fonctions importantes. La gestion des droits des utilisateurs peut contrôler les droits d'exploitation des utilisateurs dans les applications et garantir la sécurité et la légalité des données. Dans les formulaires PHP, la gestion des droits des utilisateurs peut être implémentée via un code simple. Cet article présentera comment gérer la gestion des droits des utilisateurs dans les formulaires PHP et donnera des exemples de code correspondants. 1. Définition et gestion des rôles utilisateurs Tout d'abord, la définition et la gestion des rôles utilisateurs sont une question de droits d'utilisateur.

Comment utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie d'un formulaire ? Comment utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie d'un formulaire ? Oct 18, 2023 am 08:47 AM

Comment utiliser JavaScript pour implémenter la vérification en temps réel du contenu de la zone de saisie d'un formulaire ? Dans de nombreuses applications Web, les formulaires constituent le moyen d'interaction le plus courant entre les utilisateurs et le système. Cependant, le contenu saisi par l'utilisateur doit souvent être validé pour garantir l'exactitude et l'exhaustivité des données. Dans cet article, nous apprendrons comment utiliser JavaScript pour mettre en œuvre une vérification en temps réel du contenu de la zone de saisie du formulaire et fournirons des exemples de code spécifiques. Création du formulaire Nous devons d'abord créer un tableau simple en HTML

Comment utiliser HTML, CSS et jQuery pour réaliser la fonction avancée de sauvegarde automatique des formulaires Comment utiliser HTML, CSS et jQuery pour réaliser la fonction avancée de sauvegarde automatique des formulaires Oct 28, 2023 am 08:20 AM

Comment utiliser HTML, CSS et jQuery pour implémenter la fonction avancée d'enregistrement automatique des formulaires. Les formulaires sont l'un des éléments les plus courants dans les applications Web modernes. Lorsque les utilisateurs saisissent des données de formulaire, la manière de mettre en œuvre la fonction d'enregistrement automatique peut non seulement améliorer l'expérience utilisateur, mais également garantir la sécurité des données. Cet article expliquera comment utiliser HTML, CSS et jQuery pour implémenter la fonction de sauvegarde automatique du formulaire et joindra des exemples de code spécifiques. 1. Structure du formulaire HTML Créons d’abord un formulaire HTML simple.

Comment utiliser Vue pour implémenter des cases à sélection multiple et des boutons radio Comment utiliser Vue pour implémenter des cases à sélection multiple et des boutons radio Nov 07, 2023 am 11:42 AM

Comment utiliser Vue pour implémenter des boîtes à sélection multiple et des boutons radio Vue est un framework JavaScript populaire largement utilisé dans le développement Web. Dans Vue, nous pouvons facilement implémenter divers effets interactifs, notamment des boîtes à sélection multiple et des boîtes à boutons radio. Cet article expliquera comment utiliser Vue pour implémenter des cases à sélection multiple et des boutons radio, et fournira des exemples de code spécifiques. Implémentation d'une boîte à sélection multiple Une boîte à sélection multiple est utilisée pour permettre à l'utilisateur de sélectionner plusieurs options. Dans Vue, nous pouvons utiliser la directive v-model pour implémenter la liaison de données bidirectionnelle des boîtes à sélection multiple. Voici un exemple simple

La relation entre la case à cocher multi-sélection et la sélection de toutes les fonctions dans le document Vue La relation entre la case à cocher multi-sélection et la sélection de toutes les fonctions dans le document Vue Jun 21, 2023 am 09:33 AM

Avec le développement et l'avancement continus de la technologie front-end, l'application du framework Vue devient de plus en plus populaire. Dans les applications pratiques de Vue, les fonctions consistant à cocher plusieurs cases de sélection et à toutes les sélectionner sont souvent utilisées. Dans la documentation Vue, les méthodes d'implémentation consistant à cocher plusieurs cases de sélection et à toutes les sélectionner sont également très détaillées. Boîte à sélection multiple dans Vue Dans Vue, la méthode d'implémentation de la boîte à sélection multiple est très simple. Il vous suffit d'utiliser &lt;inputtype="checkbox"&gt; Lorsque plusieurs sélections doivent être effectuées

Traitement des formulaires PHP : requête et filtrage des données du formulaire Traitement des formulaires PHP : requête et filtrage des données du formulaire Aug 07, 2023 pm 06:17 PM

Traitement des formulaires PHP : requête et filtrage des données des formulaires Introduction Dans le développement Web, les formulaires constituent un moyen d'interaction important. Les utilisateurs peuvent soumettre des données au serveur via des formulaires pour un traitement ultérieur. Cet article explique comment utiliser PHP pour traiter les fonctions de requête et de filtrage des données de formulaire. Conception et soumission du formulaire Tout d'abord, nous devons concevoir un formulaire qui inclut des fonctions de requête et de filtrage. Les éléments de formulaire courants incluent des zones de saisie, des listes déroulantes, des boutons radio, des cases à cocher, etc., qui peuvent être conçus en fonction de besoins spécifiques. Lorsque l'utilisateur soumet le formulaire, les données seront envoyées au POS

See all articles