cari

Rumah  >  Artikel  >  hujung hadapan web  >  在jQuery中如何实现点击DIV触发点击CheckBox

在jQuery中如何实现点击DIV触发点击CheckBox

亚连
亚连asal
2018-06-19 18:04:472669semak imbas

下面我就为大家分享一篇jQuery实现点击p同时点击CheckBox,并为p上背景色的实例，具有很好的参考价值，希望对大家有所帮助。

废话不多说，直接上代码吧

<!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>

效果截图：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Javascript中如何实现网页抢红包

详细解读react后端渲染模板

在React中有关高阶组件详细介绍

如何解决Router跨模块跳转问题

Atas ialah kandungan terperinci 在jQuery中如何实现点击DIV触发点击CheckBox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery checkbox
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在AngularJs中点击状态如何改变背景色Artikel seterusnya：使用JS如何实现点击复选框修改显示状态

Artikel berkaitan

Lihat lagi