How to implement clicking on DIV to trigger clicking on CheckBox in jQuery-JS Tutorial-php.cn

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

亚连

Release： 2018-06-19 18:04:47

Original

2644 people have browsed it

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>

Copy after login

Screenshot of the effect:

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

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!