ตัวอย่าง Code ซ่อน/แสดง Textbox ด้วย Radio buttonjQuery มีตัวอย่างการใช้งาน

เราสามารถเขียน jQuery เพื่อใช้สำหรับ ซ่อนหรือแสดง Textbox ผ่านการเลือก Radio button ได้ตามตัวอย่างด้านล่างนี้

See the Pen Show/Hide Textbox via Radio button by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

---

ตัวอย่างการเขียนโค้ด

เราสามารถเรียกใช้งาน jQuery โดยเพิ่ม code script ลงไปใน Tag <header>....</header> ตามรูปด้านล่าง และเพื่อเพิ่มความสวยงามให้กับ Form เราสามารถเรียกใช้ Bootstarp css ได้อีกด้วย

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin="anonymous"></script>

Code ส่วนของ HTML สำหรับสร้าง Radio button และ Textbox

<div class="container1">
    <h1>ตัวอย่าง ซ่อน/แสดง Textbox ด้วย Radio button jQuery</h1>
    <div class="row example-box" style="">
        <div class='col-sm-12' style="margin-bottom: 25px;">
            <!-- Default checked -->
            <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="showChecked" name="showHideTextbox" value="show" checked>
                <label class="custom-control-label" for="showChecked">Show</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" id="hideChecked" name="showHideTextbox" value="hide">
                <label class="custom-control-label" for="hideChecked">Hide</label>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                <input type="text" id="input1" class="textbox form-control" placeholder="Textbox ตัวอย่าง">
            </div>
        </div>
    </div>
</div>

Code ส่วน javascript สำหรับเขียน function ควบคุมการ ซ่อน/แสดง Textbox ผ่านการเลือก Radio Button

<script>
$(document).ready(function(){
$('input[name="showHideTextbox"]').on('click',function(){
if($(this).val() === 'show'){
$('#input1').show();
}else{
$('#input1').val('').hide();
}
});
});
</script>

---

อธิบายเพิ่มเติม

ตัวอย่างด้านบน การใช้ Radio Button สำหรับซ่อน/แสดง Textbox จะแตกต่างจากการเลือกผ่าน Listbox โดยเราจะใช้ทำรูปแบบ $('input[name="showHideTextbox"]') ซึ่งเป็นการเรียกผ่าน Input Name แทนการเรียกแบบ $('#id') ซึ่งเป็นการเรียกผ่าน ID เนื่องจาก Radio button จำเป็นที่จะต้องมีชื่อเหมือนกันจึงจะทำงานได้

ในตัวอย่างเราสามารถซ่อน Textbox ได้ที่ละ 1 id แต่ เราสามารถซ่อน Textbox หรือแม้แต่ DIV ได้เลยละหลาย ๆ ส่วนพร้อมกันเพียงเปลี่ยน

$('#id') เป็น $('.class') แทน เท่านี้เราก็จะสามารถ ซ่อน/แสดง Object ได้ครั้งละหลาย ๆ ชิ้นพร้อมกัน