search

Home >Web Front-end >JS Tutorial >How to implement clicking on DIV to trigger clicking on CheckBox in jQuery

How to implement clicking on DIV to trigger clicking on CheckBox in jQuery

亚连
亚连Original
2018-06-19 18:04:472695browse

Below I will share with you an example of using jQuery to realize clicking p and clicking CheckBox at the same time, and setting the background color for p. It has a good reference value and I hope it will be helpful to everyone.

Without further ado, let’s go straight to the 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>

Screenshot of the effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement web page grabbing red envelopes in Javascript

##Detailed interpretation of react back-end rendering template

Detailed introduction to high-order components in React

How to solve the problem of Router cross-module jump

The above is the detailed content of How to implement clicking on DIV to trigger clicking on CheckBox in jQuery. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery checkbox
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to change background color on click state in AngularJsNext article：How to change background color on click state in AngularJs

Related articles

See more