Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > การ Show-hide อิลีเม้นท์ เฉพาะ id แยกจากกัน โดยใช้ jQuery อยากให้ p กลับมาเฉพาะ id Checkbox นั้นๆ

การ Show-hide อิลีเม้นท์ เฉพาะ id แยกจากกัน โดยใช้ jQuery อยากให้ p กลับมาเฉพาะ id Checkbox นั้นๆ

เริ่มหัวข้อใหม่

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html{width:860px;}
p  {
	color: #E864CB;
	font-size:18px;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0,0.7);
	padding: 10px 10px;
	position: relative;
	top:-200px;
	left: 35px;
	width: 100px;
	height: 100px;
	z-index: 999;

}
</style>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
jQuery(function($) {
	$("form a[id='check_all']").click(function() { // triggred check
		var inputs = $("form input[type='checkbox']"); // get the checkbox
		for(var i = 0; i < inputs.length; i++) { // count input tag in the form 
			var type = inputs[i].getAttribute("type"); //  get the type attribute
				if(type == "checkbox") {
							$( "div[id='show_chk'" ).hide();
							inputs[i].checked = true; // checked
							$( "p" ).hide( "FadeOut" );
							$( "div[id='show_button'" ).show( "FadeIn" );
				} else {
							inputs[i].checked = false; // unchecked
							$( "p" ).show( "FadeIn" );
							$( "div[id='show_button'" ).hide( "FadeOut" );	
				 
				} 
		}
	});
	
	$("#uncheck_all").click(function() { 
	var inputs = $("form input[type='checkbox']"); // get the checkbox
		for(var i = 0; i < inputs.length; i++) { // count input tag in the form 
			var type = inputs[i].getAttribute("type"); //  get the type attribute
				if(type == "checkbox") {
					if(this.checked) {
									} else {
						inputs[i].checked = false;
						$( "div[id='show_chk'" ).show();
						$( "p" ).show( "FadeIn" );
						$( "div[id='show_button'" ).hide();	
				 	 }
				} 
		}
	});
}); 
</script>
 </head>
<BODY style="width:860px">   
  <form action="index.php" method="post" name="data_table" id="data_table">
<div id="show_chk">
	<a id="check_all" href="#"> เลือกทั้งหมด</a>
</div>
<div id="show_button" style="display:none">
	<a id="uncheck_all" href="#">ยกเลิกทั้งหมด</a>
</div>
<br><br>
<input type="checkbox" value="" name="data1" id="data1">                                  
<img src="" title="รูปที่1" width="200" height="200" style="border: 1px solid #ccc; padding: 5px;">
<p id="p1"> test1 </p>  <!--เพิ่ม id="p1" -->
<input type="checkbox" value="" name="data2" id="data2">                                  
<img src="" title="รูปที่2" width="200" height="200" style="border: 1px solid #ccc; padding: 5px;">
<p id="p2"> test2 </p> <!--เพิ่ม id="p2" -->
</form>
</body>
</html>

จาก code จำทำงานประมาณว่า
1.เมื่อคลิกข้อความ "เลือกทั้งหมด" รูปสีดำ p - test1 และ p- test2 จะหายไป
จากนั้น checkbox name="data1" id="data1" และ name="data2" id="data2" จะทำการ checked = true
2.เมื่อคลิกข้อความ "ยกเลิกทั้งหมด" รูปสีดำ test1 และ test2 ก็จะกลับมา
จากนั้น checkbox name="data1" id="data1" และ name="data2" id="data2" จะทำการ checked = false

สิ่งที่อยากจะถาม
ถ้าเรา checkbox ที่ name="data1" id="data1" อยากให้ รูปสีดำ p - test1 หายออกไปอันเดียว if เดียว
ถ้าเรา เอาเครื่องหมายถูก ก็ให้ รูปสีดำ p - test1 กลับมา

กรณีเดียวกัน name="data2" id="data2" ก็เหมือนกัน ให้แยกจากกัน

ควรจะทำอย่างไรครับ ขอคำแนะนำหน่อยครับ
จะต้องปรับ P ให้มี id ของใครของมันไหม หรือ จัดการแค่ jquery ก็ได้ ด้วยคำรูปแบบคำสั่งอะไร
(ระหว่างที่โพสต์ถาม ก็หาคำตอบไปด้วย ถ้าหาเจอจะมาอัพเดพบอกกล่าวครับ)

แก้ไข #2 ถ้าใส่แบบนี้ลงไป เฉพาะเจาะจง id ก็พอเข้าใจครับ แต่จริง ๆ แล้ว รูปจะมีเยอะ แปรผันตามข้อมูลจาก database มี record เท่าไรก็มีรูปออกมาเท่านั้น
p เยอะมาก ตามจำนวนรูปที่ดึงมาแสดง
ถ้าจะมาเขียน p1 p2 p3 ...... pn ก็จะเยอะ จะรวบรัดเขียนย่อ ๆ ให้ใช้เยอะ ๆ ก็นึกไม่ออก
ไม่รู้ว่าควรต้องกำหนดอะไรแบบไหนดี
แนะนำด้วยนะครับ

		/* ถ้าแยก id แบบนี้ พอทำได้  */
 $("form input[id*='data']").change(function() { 
				if (this.checked) {
					alert("22222");
					$( "#p1" ).hide( "FadeIn" );
  } else {
					alert("1111111");
   					$( "div[id='show_chk'" ).show();
					$( "div[id='show_button'" ).hide();	
					$( "#p1" ).show( "FadeIn" );
  }                   

	});

Tag : PHP, jQuery

ประวัติการแก้ไข
2014-07-28 15:29:55
2014-07-28 15:43:14

Date : 2014-07-28 15:28:49

By : apisitp

View : 1686

Reply : 21

No. 1

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

https://www.thaicreate.com/php/forum/106539.html
นั่งนึกไปนึกมาจำได้ว่าเคยถามเกี่ยวกับระบุ id ไว้..
เด๋วลองไปอ่านก่อน ถามไว้นานจนลืม 555+

Date : 2014-07-28 15:47:41

By : apisitp

No. 2

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

Code (PHP)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html{width:860px;}
p  {
	color: #E864CB;
	font-size:18px;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0,0.7);
	padding: 10px 10px;
	position: relative;
	top:-200px;
	left: 35px;
	width: 100px;
	height: 100px;
	z-index: 999;

}
</style>
 <script>
jQuery(function($) {
	$('form').on('click','#All',function(){
		$(':checkbox').each(function(index, element) {
            $(this).fadeIn();
			$(this).prop('checked',true);
			$('p').fadeIn();
        });	
	});
	
	$('form').on('click','#UnAll',function(){
		$(':checkbox').each(function(index, element) {
            $(this).fadeIn();
			$(this).prop('checked',false);
			$('p').fadeOut();
        });	
	});
	
	$('form').on('click',':checkbox',function(){
		var id=$(this).attr('rel');
		if($(this).prop('checked') == true){	
			$('p[rel='+id+']').fadeIn();
		}else{
			$('p[rel='+id+']').fadeOut();
		}
	});
}); 
</script>
 </head>
<BODY style="width:860px">   
  <form action="index.php" method="post" name="data_table" id="data_table">
<button id="All" type="button">All</button>
<button id="UnAll" type="button">UnAll</button>
<br><br>

<div>
<input type="checkbox" value="" name="data1" id="data1" rel="1" checked>                            
<img src="" title="รูปที่1" width="200" height="200" style="border: 1px solid #ccc; padding: 5px;">
<p id="p1" rel="1"> test1 </p>  <!--เพิ่ม id="p1" -->
</div>

<div>
<input type="checkbox" value="" name="data2" id="data2" rel="2" checked>                                  
<img src="" title="รูปที่2" width="200" height="200" style="border: 1px solid #ccc; padding: 5px;">
<p id="p2" rel="2"> test2 </p> <!--เพิ่ม id="p2" -->
</div>
</form>
</body>
</html>

แนะนำ
1. ในการ Loop All ทุกครั้งแนะนำให้ใช้ .each จะเหมาะสมกว่า for ครับ ซึ่งเป็น Future ของ jQuery อยู่แล้ว
2. ระหว่าง $("#uncheck_all").click(function() { และ $('#body').on('click',':checkbox',function(){ จะทำงานได้ดีกว่ากับ attr อนาคตที่จะเกิดขึ้น
3. inputs[i].getAttribute("type") แนะนำให้ใช้เป็น prop เพราะอาจเกิดปัญหาในการตอบสนองในการ load page ได้;

ประวัติการแก้ไข
2014-07-28 16:32:31
2014-07-28 16:39:00
2014-07-28 16:48:08

Date : 2014-07-28 16:28:20

By : Ex-[S]i[L]e[N]t

No. 3

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

เปิดคอร์ส อบรมไหม พี่จะไปลงเรียนทันที ..... สุดยอดจริง ๆ ครับ.....ขอบพระคุณ ๆ

วิธีแก้ที่คิด ลองทำ และทำได้
ผมใช้ php เข้าไปปะปนใน jQuery ไม่รู้ว่าดี ถูก/ผิด เช่นไร แต่คิดเองน่าจะไม่ผิดเพราะทำงานได้ แต่ผิดหลักการเขียน Code แน่ ๆ
เอามาให้วิจารณ์กันครับ

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html{width:860px;}
p  {
	color: #E864CB;
	font-size:18px;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0,0.7);
	padding: 10px 10px;
	position: relative;
	top:-200px;
	left: 35px;
	width: 100px;
	height: 100px;
	z-index: 999;

}
</style>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script>
jQuery(function($) {
		$("form a[id='check_all']").click(function() { // triggred check
		var inputs = $("form input[type='checkbox']"); // get the checkbox
		for(var i = 0; i < inputs.length; i++) { // count input tag in the form 
			var type = inputs[i].getAttribute("type"); //  get the type attribute
				if(type == "checkbox") {
							$( "div[id='show_chk'" ).hide();
							inputs[i].checked = true; // checked
							$( "p" ).hide( "FadeOut" );
							$( "div[id='show_button'" ).show( "FadeIn" );
				} else {
							inputs[i].checked = false; // unchecked
							$( "p" ).show( "FadeIn" );
							$( "div[id='show_button'" ).hide( "FadeOut" );	
				 
				} 
		}
	});
	$("#uncheck_all").click(function() { 
	var inputs = $("form input[type='checkbox']"); // get the checkbox
		for(var i = 0; i < inputs.length; i++) { // count input tag in the form 
			var type = inputs[i].getAttribute("type"); //  get the type attribute
				if(type == "checkbox") {
					if(this.checked) {
									} else {
						inputs[i].checked = false;
						$( "div[id='show_chk'" ).show();
						$( "p" ).show( "FadeIn" );
						$( "div[id='show_button'" ).hide();	
				 	 }
				} 
		}
	});
	// คิดและลองทำแบบนี้เล่นจริง ๆ ถ้าหาทางไม่ได้ก็จะใช้แบบนี้ แต่ถ้าแค่ 10 record - code ก็บานแล้ว (- - ")
<?php 
	for( $i =1; $i < 3; $i++) {
?>
$("form input[id='data<?php echo $i; ?>']").change(function() { 

				if (this.checked) {
					alert("22222");
					$( "#p<?php echo $i; ?>" ).hide( "FadeIn" );
  } else {
					alert("1111111");
   					$( "div[id='show_chk'" ).show();
					$( "div[id='show_button'" ).hide();	
					$( "#p<?php echo $i; ?>" ).show( "FadeIn" );
  }                   

	});
<?php
}
	?>
}); 
</script>

 </head>
<BODY style="width:860px">   
  <form action="index.php" method="post" name="data_table" id="data_table">
<div id="show_chk">
	<a id="check_all" href="#"> เลือกทั้งหมด</a>
</div>
<div id="show_button" style="display:none">
	<a id="uncheck_all" href="#">ยกเลิกทั้งหมด</a>
</div>
<br><br>

<?php 
	for( $j =1; $j <3; $j++) {
?>
<input type="checkbox" value="" name="data<?php echo $j; ?>" id="data<?php echo $j; ?>">                                  
<img src="" title="รูปที่<?php echo $j; ?>" width="200" height="200" style="border: 1px solid #ccc; padding: 5px;" id="pic<?php echo $i; ?>">
<p id="p<?php echo $j; ?>"> test<?php echo $j; ?> </p> 
<?php
}
	?>
</form>
</body>
</html>

Date : 2014-07-28 17:20:34

By : apisitp

No. 4

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 3 เขียนโดย : apisitp เมื่อวันที่ 2014-07-28 17:20:34

รายละเอียดของการตอบ ::

อยู่ที่ idea ของแต่ละท่านครับ ไม่มีถูกผิดครับผม
jQuery ยิ่งเขียนได้สั้นเท่าไหร่ยิ่งดีครับ ได้ตังไวครับ

Date : 2014-07-28 17:24:56

By : Ex-[S]i[L]e[N]t

No. 5

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

Date : 2014-07-28 17:54:00

By : apisitp

No. 6

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

แหมมมม... คุยกันแค่สองคน ไม่ชวนกันเลยน่ะ

Date : 2014-07-28 22:37:48

By : sakuraei

No. 7

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 6 เขียนโดย : sakuraei เมื่อวันที่ 2014-07-28 22:37:48

รายละเอียดของการตอบ ::

พี่เทพมาแล้ว

Date : 2014-07-29 09:39:38

By : Ex-[S]i[L]e[N]t

No. 8

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

javascript PHP CSS ยังพอถู ๆ ไถ ๆ ไปได้ แต่ jQuery ยังมองให้สั้น ๆ ไม่ออกเจง ๆ ฮ่าๆๆๆ

Date : 2014-07-29 09:44:18

By : apisitp

No. 9

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 8 เขียนโดย : apisitp เมื่อวันที่ 2014-07-29 09:44:18

รายละเอียดของการตอบ ::

อยากเรียนคอสอะไรติดต่อคุณ sakuraei ได้นะครับ (พี่เค้าชู๊ตบาสเก่ง)

Date : 2014-07-29 09:51:19

By : Ex-[S]i[L]e[N]t

No. 10

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ตอนนี้เริ่มไปจับ NodeJS กับ Python ครับ กำลังสนุกเลย

Date : 2014-07-29 14:10:25

By : sakuraei

No. 11

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 10 เขียนโดย : sakuraei เมื่อวันที่ 2014-07-29 14:10:25

รายละเอียดของการตอบ ::

ผมยังไม่ไปไหนเลยครับลูกพี่ -.-"

Date : 2014-07-29 14:27:17

By : Ex-[S]i[L]e[N]t

No. 12

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ตอนนี้ยูก็เก่งมากแล้ววว ส่วนของพี่มันจำเป็นอ่ะ ต้องมานั่งเขียนหาตังค์กินข้าว

ช่วงนี้ว่างเหรอ.. เห็นมาช่วยหลายกระทง เลย....

ประวัติการแก้ไข
2014-07-29 14:46:55

Date : 2014-07-29 14:45:07

By : sakuraei

No. 13

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 12 เขียนโดย : sakuraei เมื่อวันที่ 2014-07-29 14:45:07

รายละเอียดของการตอบ ::

ว่างคร๊าบพี่ กำลังว่าจะศึกษา .net อยู่ แต่สงสัยมือไม่ถึงครับพี่ คงต้องลองไปเรื่อยๆ 55+

ประวัติการแก้ไข
2014-07-29 15:12:34

Date : 2014-07-29 15:12:05

By : Ex-[S]i[L]e[N]t

No. 14

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

มึนครับ .net เรามาสายนี้ จะหันกลับไปลากออปเจ็คมาวาง แล้วแทรกโค้ด ก็ไม่ไหว ไม่ใช่มือไม่ถึงน่ะ

แต่จะงงกับเครื่องมือซะมากกว่า ต้องปรับกระบวนการเรียนรู้ใหม่ มันอยู่ต่างขั้วครับ

Date : 2014-07-29 15:19:18

By : sakuraei

No. 15

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 14 เขียนโดย : sakuraei เมื่อวันที่ 2014-07-29 15:19:18

รายละเอียดของการตอบ ::

งั้นยกเลิกโปรเจคนี้ครับ 55+

สอบถามเพิ่มเติมครับ ณ ขณะนี้ professional ส่วนมากจะเขียน php ในรูปแบบ Class หรือ รูปแบบปกติอยู่หรอครับ

Date : 2014-07-29 15:22:55

By : Ex-[S]i[L]e[N]t

No. 16

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ในประเทศไทยพี่ว่า ฟรีแลนซ์ส่วนใหญ่ยังคงเขียนแบบ procedural ธรรมดา

แต่ในบริษัทซอฟแวร์เฮ้าส์ทั่วไปคงใช้เฟรมเวิร์ค เพราะควบคุมง่าย เหมาะแก่การทำงานเป็นทีมครับ

Date : 2014-07-29 15:30:25

By : sakuraei

No. 17

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ในประเทศไทยพี่ว่า ฟรีแลนซ์ส่วนใหญ่ยังคงเขียนแบบ procedural ธรรมดา เพราะต้องรีบให้จบงานเร็วที่สุด และไม่มีเงินมาเรียนเพิ่มเติม
อาศัยแค่ความรู้พื้นฐานก็พอเพียงที่จะหาเงินเลี้ยงชีพได้ ยกเว้นว่าจะยกระดับการเรียนในมหาวิทยาลัย หลักสูตรแบบพื้นๆ มันไม่เพียงพออีกต่อไป ต้องอัดพวกเฟรมเวิร์ดเข้าไปด้วย

แต่ในบริษัทซอฟแวร์เฮ้าส์ทั่วไปจำเป็นต้องใช้เฟรมเวิร์ค เพราะควบคุมง่าย เหมาะแก่การทำงานเป็นทีม มีงบเพื่อส่งพนักงานอบรม
และลูกค้าต่างประเทศมักจะเชื่อมั่นซอฟท์แวร์ที่เขียนขึ้นจากเฟรมเวิร์คมากกว่า

Date : 2014-07-29 15:41:16

By : sakuraei

No. 18

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 17 เขียนโดย : sakuraei เมื่อวันที่ 2014-07-29 15:41:16

รายละเอียดของการตอบ ::

ขอบคุณครับ

Date : 2014-07-29 15:49:29

By : Ex-[S]i[L]e[N]t

No. 19

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

Date : 2014-08-01 08:43:36

By : apisitp

No. 20

หางอึ่ง

โพสกระทู้ ( 1,348 )
บทความ ( 1 )

เค้าสองคนนั้นคุยอะไรกัน อยากรู้เรื่องมั่ง

Date : 2014-08-01 09:17:41

By : watcharop

No. 21

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

ตอบความคิดเห็นที่ : 20 เขียนโดย : watcharop เมื่อวันที่ 2014-08-01 09:17:41

รายละเอียดของการตอบ ::

ajax&jQuery สนใจคุยกันได้นะครับ

Date : 2014-08-01 10:14:39

By : Ex-[S]i[L]e[N]t

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : การ Show-hide อิลีเม้นท์ เฉพาะ id แยกจากกัน โดยใช้ jQuery อยากให้ p กลับมาเฉพาะ id Checkbox นั้นๆ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00

Registered : 109,037

document.write("<font color=996600>[PHP]</font>"); การ Show-hide อิลีเม้นท์ เฉพาะ id แยกจากกัน โดยใช้ jQuery อยากให้ p กลับมาเฉพาะ id Checkbox นั้นๆ

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

No. 10

No. 11

No. 12

No. 13

No. 14

No. 15

No. 16

No. 17

No. 18

No. 19

No. 20

No. 21

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

การ Show-hide อิลีเม้นท์ เฉพาะ id แยกจากกัน โดยใช้ jQuery อยากให้ p กลับมาเฉพาะ id Checkbox นั้นๆ