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

จำนวนผู้เข้าชม : 36

เราขอแนะนำตัวอย่างการเขียนคำสั่ง 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();
    }
});

การควบคุมการ เปิด/ปิด และ ซ่อน/แสดง 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 แบบต่างๆ ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย