สอบถามการใช้ Radio ในการ แสดง / ซ่อน Rows ในตารางครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามการใช้ Radio ในการ แสดง / ซ่อน Rows ในตารางครับ

สอบถามการใช้ Radio ในการ แสดง / ซ่อน Rows ในตารางครับ
คือทำเว๊ปฟอร์มประเมิน เก็บข้อมูลสุขภาพครับ
 
สมมุติ  ถ้า ข้อ 1. เลือก ใช้ จะแสดง ข้อ 2. และ 3.     ***ถ้าเลือกไม่ใช่ จะแสดง ข้อ 4. ครับ
 
พอถึงข้อ 4.  ก็จะเหมือน ข้อ 1. ครับ ให้เลือกเหมือนกัน แต่ถ้า เลือกในเงื่อนไขใดเงื่อนไขนึงเสร็จจะข้ามไปอีกตารางที่เป็นข้อ 7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap1.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<br />
		
	<div class="container">

		<form method="post" action="">
			<fieldset>
				<legend>กิจกรรมในการทำงาน(Activity at work)</legend>	
            </fieldset>			
  			<table class="table table-bordered">
            	<thead>
      				<tr class="danger">
       					<th WIDTH="5%" class="text-center">No.</th>
        				<th WIDTH="70%" class="text-center">คำถาม</th>
        				<th WIDTH="25%" class="text-center">คำตอบ</th>
     			    </tr>
   				</thead>
                <tbody>
      				<tr class="warning">
        				<td class="text-center">1.</td>
        				<td>
                        งานของท่านมีส่วนเกี่ยวข้องกับ "กิจกรรมที่มีความหนักค่อนข้างมาก"จนเป็นเหตุให้ต้องหายใจถี่ขึ้นมากหรืออัตราเต้นของหัวใจเพิ่มสูงขึ้นอย่างมาก เช่น งานยก/แบก/หามของหนัก งานขุดดิน หรือ งานก่อสร้าง ติดต่อกันอย่างน้อย10นาที									              			</td>
        				<td class="text-center">
                        	<input type="radio" class="css_rad4" name="pt_work1" value="1"> <font size="4"> ใช่ 
                            &nbsp;&nbsp;
                            <input type="radio" class="css_rad4" name="pt_work1" value="2"> ไม่ใช่ </font>
                        </td>
      				</tr>
					<tr class="info" class="css_groub_chk4">
        				<td class="text-center" class="css_chk4">2.</td>
        				<td class="css_chk4">
                        ท่านต้องทำ "กิจกรรมที่มีความหนักค่อนข้างมาก" ซึ่งเป็นส่วนหนึ่งของงานท่าน สัปดาห์ละกี่วัน
                        </td>
        				<td class="text-center" class="css_chk4"><input type="tel" name="pt_work2" maxlength="1" placeholder="วัน" style="width:30px;">								       					</td>
    			 	</tr>
                    <tr class="active">
        				<td class="text-center">3.</td>
        				<td>
                        ท่านใช้เวลานานเพียงเท่าใดในการทำ "กิจกรรมที่มีความหนักค่อนข้างมาก" ในการทำงานแต่ละวัน							              			
                        </td>
        				<td class="text-center">
                        	<input type="tel" name="pt_work3_hr" maxlength="2" placeholder="ชม" style="width:50px;">
                            &nbsp;&nbsp;
                            <input type="tel" name="pt_work3_min" maxlength="2" placeholder="นาที" style="width:50px;">
                        </td>
      				</tr>
                    <tr class="warning">
        				<td class="text-center">4.</td>
        				<td>
                        งานของท่านมีส่วนเกี่ยวข้องกับ "กิจกรรมที่มีความหนักปานกลาง"ที่ทำให้ท่านมีการหายใจถี่ขึ้นเล็กน้อย หรืออัตราการเต้นของหัวใจเพิ่มขึ้นเล็กน้อย เช่น เดินเร็วๆ หรือมีการยกของเบาๆ ติดต่อกันเป็นเวลาอย่างน้อย10นาที									              			</td>
        				<td class="text-center">
                        	<input type="radio" name="pt_work4" value="1"> <font size="4"> ใช่ 
                            &nbsp;&nbsp;
                            <input type="radio" name="pt_work4" value="2"> ไม่ใช่ </font>
                        </td>
      				</tr>
               		<tr class="info">
        				<td class="text-center">5.</td>
        				<td>
                        ท่านต้องทำ "กิจกรรมที่มีความหนักปานกลาง" ซึ่งเป็นส่วนหนึ่งของงานท่าน สัปดาห์ละกี่วัน
                        </td>
        				<td class="text-center"><input type="tel" name="pt_work5" maxlength="1" placeholder="วัน" style="width:30px;"></td>
    			 	</tr>
                    <tr class="active">
        				<td class="text-center">6.</td>
        				<td>
                        ท่านใช้เวลานานเพียงเท่าใดในการทำ "กิจกรรมที่มีความหนักปานกลาง" ในการทำงานแต่ละวัน							              			
                        </td>
        				<td class="text-center">
                        	<input type="tel" name="pt_work6_hr" maxlength="2" placeholder="ชม" style="width:50px;">
                            &nbsp;&nbsp;
                            <input type="tel" name="pt_work6_min" maxlength="2" placeholder="นาที" style="width:50px;">
                        </td>
      				</tr>
          	  </tbody>
 		 </table>        
		
        
        
         <fieldset>
				<legend>การเดินทางไป-กลับ ที่ต่างๆ (Travel to and from places)</legend>	
         </fieldset>
		 <table class="table table-bordered">
            	<thead>
      				<tr class="danger">
       					<th WIDTH="5%" class="text-center">No.</th>
        				<th WIDTH="70%" class="text-center">คำถาม</th>
        				<th WIDTH="25%" class="text-center">คำตอบ</th>
     			    </tr>
   				</thead>
                <tbody>
                	<tr class="warning">
        				<td class="text-center">7.</td>
        				<td>
                        ท่านต้องเดินทางไป-กลับ ยังที่ต่างๆโดยการเดิน หรือขี่จักรยาน ติดต่อกันอย่างน้อย 10 นาทีหรือไม่?								              			</td>
        				<td class="text-center">
                        	<input type="radio" name="pt_work7" value="1"> <font size="4"> ใช่ 
                            &nbsp;&nbsp;
                            <input type="radio" name="pt_work7" value="2"> ไม่ใช่ </font>
                        </td>
      				</tr>
                    <tr class="info">
        				<td class="text-center">8.</td>
        				<td>
                        ในแต่ละสัปดาห์ มีกี่วันที่ท่านได้เดินหรือขี่จักรยานไป-กลับ ยังที่ต่างๆติดต่อกันอย่างน้อย10นาที
                        </td>
        				<td class="text-center"><input type="tel" name="pt_work8" maxlength="1" placeholder="วัน" style="width:30px;"></td>
    			 	</tr>
                    <tr class="active">
        				<td class="text-center">9.</td>
        				<td>
                        ในแต่ละวัน ท่านใช้เวลาเพื่อการเดิน หรือขี่จักรยานนานเพียงใด							              			
                        </td>
        				<td class="text-center">
                        	<input type="tel" name="pt_work9_hr" maxlength="2" placeholder="ชม" style="width:50px;">
                            &nbsp;&nbsp;
                            <input type="tel" name="pt_work9_min" placeholder="นาที" style="width:50px;">
                        </td>
      				</tr>
           	  </tbody>
 		 </table>    
         
         
         
         <fieldset>
				<legend>กิจกรรมนันทนาการ (Recreational activities)</legend>	
         </fieldset>
		 <table class="table table-bordered">
            	<thead>
      				<tr class="danger">
       					<th WIDTH="5%" class="text-center">No.</th>
        				<th WIDTH="70%" class="text-center">คำถาม</th>
        				<th WIDTH="25%" class="text-center">คำตอบ</th>
     			    </tr>
   				</thead>
                <tbody> 
                	<tr class="warning">
        				<td class="text-center">10.</td>
        				<td>
                        ท่านได้เล่นกีฬา หรือฝึกหนักเพื่อเสริมสร้างความแข็งแรง หรือทำกิจกรรมนันทนาการยามว่าง ที่ต้องออกแรงค่อนข้างมากจนทำให้ท่านต้องหายใจถี่ขึ้น หรือหัวใจเต้นเร็วขึ้นอย่างมาก เช่น วิ่ง หรือเล่นฟุตบอล ติดต่อกันอย่างน้อย 10 นาที								
                        </td>
        				<td class="text-center">
                        	<input type="radio" name="pt_work10" value="1"> <font size="4"> ใช่ 
                            &nbsp;&nbsp;
                            <input type="radio" name="pt_work10" value="2"> ไม่ใช่ </font>
                        </td>
      				</tr>
                    <tr class="info">
        				<td class="text-center">11.</td>
        				<td>
                        ท่านได้เล่นกีฬา หรือฝึกหนักเพื่อเสริมสร้างความแข็งแรง หรือทำกิจกรรมนันทนาการยามว่าง ที่ต้องออกแรงค่อนข้างมากสัปดาห์ละกี่วัน?
                        </td>
        				<td class="text-center"><input type="tel" name="pt_work11" maxlength="1" placeholder="วัน" style="width:30px;"></td>
    			 	</tr>
                    <tr class="active">
        				<td class="text-center">12.</td>
        				<td>
                        ท่านได้เล่นกีฬา หรือฝึกหนักเพื่อเสริมสร้างความแข็งแรง หรือทำกิจกรมมนันทนาการยามว่าง ที่ต้องออกแรงค่อนข้างมากนานเท่าไหร่ในแต่ละวัน?				              			
                        </td>
        				<td class="text-center">
                        	<input type="tel" name="pt_work12_hr" maxlength="2" placeholder="ชม" style="width:50px;">
                            &nbsp;&nbsp;
                            <input type="tel" name="pt_work12_min" placeholder="นาที" style="width:50px;">
                        </td>
      				</tr>
                    <tr class="warning">
        				<td class="text-center">13.</td>
        				<td>
                        ท่านได้เล่นกีฬา หรือฝึกเพื่อเสริมสร้างความแข็งแรง หรือทำกิจกรรมนันทนาการยามว่าง ที่ออกแรงปานกลาง ทำให้ท่านหายใจถี่ขึ้น หรือหัวใจเต้นเร็วขึ้นเล็กน้อย เช่น เดินเร็ว ขี่จักรยาน ว่ายน้ำ ฟุตบอล ติดต่อกันอย่างน้อย 10 นาที								
                        </td>
        				<td class="text-center">
                        	<input type="radio" name="pt_work13" value="1"> <font size="4"> ใช่ 
                            &nbsp;&nbsp;
                            <input type="radio" name="pt_work13" value="2"> ไม่ใช่ </font>
                        </td>
      				</tr>
                    <tr class="info">
        				<td class="text-center">14.</td>
        				<td>
                        ท่านได้เล่นกีฬา หรือฝึกเพื่อเสริมสร้างความแข็งแรง หรือทำกิจกรรมนันทนาการยามว่าง ที่ออกแรงปานกลาง สัปดาห์ละกี่วัน?
                        </td>
        				<td class="text-center"><input type="tel" name="pt_work14" maxlength="1" placeholder="วัน" style="width:30px;"></td>
    			 	</tr>
                    <tr class="active">
        				<td class="text-center">15.</td>
        				<td>
                        ท่านได้เล่นกีฬา หรือฝึกเพื่อเสริมสร้างความแข็งแรง หรือทำกิจกรรมนันทนาการยามว่าง ที่ออกแรงปานกลาง นานเท่าไหร่ในแต่ละวัน?		              			
                        </td>
        				<td class="text-center">
                        	<input type="tel" name="pt_work15_hr" maxlength="2" placeholder="ชม" style="width:50px;">
                            &nbsp;&nbsp;
                            <input type="tel" name="pt_work15_min" maxlength="2" placeholder="นาที" style="width:50px;">
                        </td>
      				</tr>
           	  </tbody>
 		 </table>  
         
         
         <fieldset>
				<legend>พฤติกรรมการนั่ง (Sedentary behavior)</legend>	
         </fieldset> 
         <table class="table table-bordered">
            	<thead>
      				<tr class="danger">
       					<th WIDTH="5%" class="text-center">No.</th>
        				<th WIDTH="70%" class="text-center">คำถาม</th>
        				<th WIDTH="25%" class="text-center">คำตอบ</th>
     			    </tr>
   				</thead>
                <tbody> 
                	<tr class="active">
        				<td class="text-center">16.</td>
        				<td>
                        ในแต่ละวัน ท่านใช้เวลาไปกับการนั่งๆนอนๆนานเพียงเท่าใด?		              			
                        </td>
        				<td class="text-center">
                        	<input type="tel" name="pt_work16_hr" maxlength="2" placeholder="ชม" style="width:50px;">
                            &nbsp;&nbsp;
                            <input type="tel" name="pt_work16_min" maxlength="2" placeholder="นาที" style="width:50px;">
                        </td>
      				</tr>
           	  </tbody>
 		 </table>  


</body>
<script src="js/CheckBoxGroup.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>


Destiny0183 43.249.70.xxx 22-01-2016 08:47:30

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1


destiny0183 43.249.70.xxx 22-01-2016 08:48
 ความคิดเห็นที่ 2
ดูโค้ดต่อไปนี้เป็นแนวทาง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
</head>
<body>
    
<div class="container">
 
    <table class="table">
        <tr>
            <td>
                <input type="radio" name="radio1" class="css_radio" id="" value="1">
                1
                <input type="radio" name="radio1" class="css_radio" id="" value="2">
                2                
            </td>
        </tr>
        <tr class="css_row">
            <td>
                row 2
            </td>
        </tr>
        <tr class="css_row">
            <td>
                row 3
            </td>
        </tr>              
        <tr>
            <td>
                <input type="radio" name="radio2" class="css_radio" id="" value="1">
                1
                <input type="radio" name="radio2" class="css_radio" id="" value="2">
                2                
            </td>
        </tr>
        <tr class="css_row">
            <td>
                row 5
            </td>
        </tr>
        <tr class="css_row">
            <td>
                row 6
            </td>
        </tr>                       
    </table>
  
</div>
       
<script type="text/javascript">
$(function(){

    $(".css_radio").on("click",function(){
        var radio_val = $(this).val();  // เก็บค่าของ radio ที่เราคลิก
        var radio_name = $(this).attr("name"); // เก็บชื่อ radio ที่เราคลิก
        // eq เริ่มนับค่าที่ 0
        if(radio_val==1 && radio_name=="radio1"){
            $(".css_row").eq(0).show();
             $(".css_row").eq(1).show();
        }
        if(radio_val==2 && radio_name=="radio1"){
            $(".css_row").eq(0).hide();
             $(".css_row").eq(1).hide();
        }        
        if(radio_val==1 && radio_name=="radio2"){
            $(".css_row").eq(2).show();
             $(".css_row").eq(3).show();
        }
        if(radio_val==2 && radio_name=="radio2"){
            $(".css_row").eq(2).hide();
             $(".css_row").eq(3).hide();
        }                
    });


})    
</script>    
</body>
</html>



ตัวอย่าง

1 2
row 2
row 3
1 2
row 5
row 6


ninenik 183.88.72.xxx 22-01-2016
 ความคิดเห็นที่ 3
ขอบคุณมากครับ ได้ตามที่ต้องการเลยครับ


destiny0183 43.249.70.xxx 22-01-2016 13:55
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ