Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter un clic sur DIV pour déclencher un clic sur CheckBox dans jQuery

亚连
Libérer: 2018-06-19 18:04:47
original
2664 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple d'utilisation de jQuery pour implémenter le clic sur p et le clic sur CheckBox en même temps, et la définition de la couleur d'arrière-plan pour p. Il a une bonne valeur de référence et j'espère que cela sera utile à tout le monde.

Plus de bêtises, passons directement au code

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>JqueryTest</title>
  <script src="js/jquery-1.8.3.min.js"></script>
  <script>
	$(document).ready(function () {

		$(&#39;input&#39;).click(function(e){
			e.stopPropagation();
			var parent = $(this).parent();
			$(this).is(&#39;:checked&#39;) ? parent.css(&#39;background-color&#39;,&#39;#CCC&#39;) : parent.css(&#39;background-color&#39;,&#39;#FFF&#39;);
		});

		$(&#39;p&#39;).click(function(){
			$(this).find(&#39;:checkbox&#39;).click();
			if($(this).css(&#39;background-color&#39;) == &#39;rgb(255, 255, 255)&#39;){
				$(this).css(&#39;background-color&#39;, &#39;#CCC&#39;);
			}else{
				$(this).css(&#39;background-color&#39;, &#39;#FFF&#39;);
			}
		});
	});
	</script>
</head>
<body>
  <p>
    <input type="checkbox" />A
  </p>
  <p>
    <input type="checkbox" />B
  </p>
  <p>
    <input type="checkbox" />C
  </p>
</body>
</html>
Copier après la connexion

Capture d'écran de l'effet :

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment récupérer des enveloppes rouges sur des pages Web en Javascript

Interprétation détaillée du modèle de rendu backend React

Introduction détaillée aux composants d'ordre élevé dans React

Comment résoudre le problème de saut entre modules du routeur

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal