อยากได้โค๊ด แสดงCheckbox เมื่อ ติ๊ก Radio แล้ว

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากได้โค๊ด แสดงCheckbox เมื่อ ติ๊ก Radio แล้ว

อยากได้โค๊ด แสดงCheckbox เมื่อ ติ๊ก Radio แล้ว

ต้องการโค๊ด แสดง checkbox 1-8 เมื่อมีการ ติ๊ก Radio มี  

และ เมื่อติ๊ก หัวข้อหลัก จะแสดงหัวข้อย่อย เช่น ติ๊ก 2 จะแสดง 2.1 2.2 มาให้ติ๊ก

ขอบคุณล่วงหน้าครับ



Destiny0183 43.249.70.xxx 18-01-2016 11:06:46

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

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


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


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

 ความคิดเห็นที่ 1
ลองดูเป็นแนวทาง

<!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">
    <label>
        <input type="radio" class="css_rad" name="status" id="" value="1">
        ไม่มี
    </label>
    <label>
        <input type="radio" class="css_rad" name="status" id="" value="2">
        มี
    </label>    
    
    <style type="text/css">
        .css_groub_chk{
            padding: 0px;
            margin: 0px;
            list-style: none;
        } 
    </style>
    <br><br>
    <ul class="css_groub_chk">
        <li>
            <input type="checkbox" class="css_chk" name="datacheckbox[]" value="1" > 1
        </li>
        <li>
            <input type="checkbox" class="css_chk" name="datacheckbox[]" value="2" > 2
        </li>
        <li class="css_sub_chk">
            <ul>
                <li>
                    <input type="checkbox" class="css_subchk" name="subchk[]" value="2.1" > 2.1
                </li>
                <li>
                    <input type="checkbox" class="css_subchk" name="subchk[]" value="2.2" > 2.2
                </li>
                <li>
                    <input type="checkbox" class="css_subchk" name="subchk[]" value="2.3" > 2.3
                </li>                                
            </ul>
        </li>
        <li>
            <input type="checkbox" class="css_chk" name="datacheckbox[]" value="3" > 3
        </li>                
    </ul>
</div>
       
<script type="text/javascript">
$(function(){
    
    $(".css_groub_chk,.css_sub_chk").hide();     
    $(".css_rad").on("click",function(){
        var checkecd_ok = $(".css_rad:checked").length;
        var checked_val = $(".css_rad:checked").val();
        if(checkecd_ok==1 && checked_val==2){
            $(".css_groub_chk").show();
        }else{
            $(".css_groub_chk").hide();                 
        }
    });
    $(".css_chk").on("click",function(){
        var chk_checked=$(this).prop("checked");
        var target_sub = $(this).parent("li").next(".css_sub_chk");
        if(chk_checked==true && target_sub.length>0){
            target_sub.show();
        }else{
            target_sub.hide();
            target_sub.find(":checkbox").prop("checked",false);
        }
    });
})    
</script>    
</body>
</html>



ตัวอย่าง




  • 1
  • 2
    • 2.1
    • 2.2
    • 2.3
  • 3


ninenik 180.183.110.xxx 18-01-2016
 ความคิดเห็นที่ 2
ขอบคุณมากครับผม


destiny0183 43.249.70.xxx 18-01-2016 16:06






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ