Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

เราขอแนะนำตัวอย่างการเขียนคำสั่ง Javascript ตัวอย่าง การเขียนโค้ด เพื่อ เปิด/ปิด และซ่อน/แสดง HTML Botton Textbox Selectbox Dropdown ด้วย Jquery เมื่อเลือกตัว เช่น เมื่อคลิก Radio, Checkbox เลือกตัวเลือกใน Listbox Dropdown ตามที่กำหนดเงื่อนแล้วให้แสดง Element ที่ต้องการ จะเขียนยังไง ลองมาอ่านดูคะ

ตัวอย่าง การใช้งาน Jquery สำหรับ เปิด/ปิด และ ซ่อน/แสดง Element เมื่อเลือกตัวเลือกใน Listbox

โดยตัวอย่างโค้ด เราจะทำการกำหนด ให้ Element ที่ต้องการควบคุม ให้มี Class name ที่ชื่อว่า ele_ref จากนั้นก็เขียนเงื่อนไข ในฝั่ง Javascript Jquery ว่าถ้ามีการเปลี่ยนแปลงเงื่อนไขภายในตัวเลือกที่กำหนด ก็ให้ทำ Action ในการ เปิด/ปิด หรือ ซ่อน/แสดง Eelement นั้น ดูคำอธิบายเพิ่มเติมได้ด้านล่าง

  • การควบคุมการ เปิด/ปิด และ ซ่อน/แสดง Element ด้วยใช้ Listbox

    $('#enable_ele').on('change',function(){
        // เมื่อมีการเลือก Listbox option = yes ให้ทำการ Enable Element
        // ทีมี class name = ele_ref 
        // แต่ถ้าไม่ใช่ก็ให้ Disable Element นั้น
        if($(this).val() === 'yes'){
            $('.ele_ref').removeAttr('disabled');
        }else{
            $('.ele_ref').attr('disabled','disabled');
        }
    });
    
    $('#show_ele').on('change',function(){
        // เมื่อมีการเลือก Listbox option = yes ให้ทำการ Show Element
        // ทีมี class name = ele_ref 
        // แต่ถ้าไม่ใช่ก็ให้ Hide Element นั้น
        if($(this).val() === 'yes'){
            $('.ele_ref').show();
        }else{
            $('.ele_ref').hide();
        }
    });
  • การควบคุมการ เปิด/ปิด และ ซ่อน/แสดง Element ด้วยใช้ Checkbox

    $('#enable_ele').on('click',function(){
        // เมื่อมีการคลิกเลือก Checkbox ให้ทำการ Enable Element
        // ทีมี class name = ele_ref 
        // แต่ถ้าไม่ใช่ก็ให้ Disable Element นั้น
        // โดยใช้ คำสั่ง $().is(':checked') ในการตรวจสอบ
        if($(this).is(':checked')){
            $('.ele_ref').removeAttr('disabled');
        }else{
            $('.ele_ref').attr('disabled','disabled');
        }
    });
    
    $('#show_ele').on('click',function(){
        // เมื่อมีการคลิกเลือก Checkbox ให้ทำการ Show Element
        // ทีมี class name = ele_ref 
        // แต่ถ้าไม่ใช่ก็ให้ Hide Element นั้น
        // โดยใช้ คำสั่ง $().is(':checked') ในการตรวจสอบ
        if($(this).is(':checked')){
            $('.ele_ref').show();
        }else{
            $('.ele_ref').hide();
        }
    });

See the Pen Untitled by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

  • การควบคุมการ เปิด/ปิด และ ซ่อน/แสดง Element ด้วยใช้ Radiobox

    $('input[name="enable_ele"]').on('click',function(){
        // เมื่อมีการเลือก Radio = yes ให้ทำการ Enable Element
        // ทีมี class name = ele_ref 
        // แต่ถ้าไม่ใช่ก็ให้ Disable Element นั้น
        if($(this).val() === 'yes'){
            $('.ele_ref').removeAttr('disabled');
        }else{
            $('.ele_ref').attr('disabled','disabled');
        }
    });
    
    $('input[name="show_ele"]').on('click',function(){
        // เมื่อมีการเลือก Radio = yes ให้ทำการ Show Element
        // ทีมี class name = ele_ref 
        // แต่ถ้าไม่ใช่ก็ให้ Hide Element นั้น
        if($(this).val() === 'yes'){
            $('.ele_ref').show();
        }else{
            $('.ele_ref').hide();
        }
    });

เป็นยังไงกันบ้างคะสำหรับบทความ Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

Javascript เทคนิค Check & Get ค่า Hash จาก URL

Javascript เทคนิค Check & Get ค่า Hash จาก URL

ดูเพลิน Admin - 26 ม.ค. 66
Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
Code script เช็คเลขบัตรประชาชน แบบ Real-time

Code script เช็คเลขบัตรประชาชน แบบ Real-time

ดูเพลิน Admin - 21 ธ.ค. 65
วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

ดูเพลิน Admin - 16 ม.ค. 66
ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ดูเพลิน Admin - 23 ม.ค. 66
Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

ดูเพลิน Admin - 26 ม.ค. 66

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4