Cách ẩn hiện nội dung khi click vào button trong jQuery

Câu hỏi: Làm thế nào để ẩn hiện nội dung của thẻ div hay một thẻ bất kì khi click vào radio botton bằng jQuery. Nghĩa là có 3 radio, khi click vào từng radio thì sẽ hiển thị các thẻ div tương ứng.

Gợi ý: Để hiển thị một thẻ html bằng jquery thì chúng ta sử dụng hàm show(), còn muốn ẩn thì chúng ta dùng hàm hide(). Hoặc bạn cũng có thể thiết lập css display:none bằng hàm css(). Trong bài này mình sẽ sử dụng hàm show() và hide() nhé.

Xem demo

Về cơ bản thì cách làm như sau:

• Đặt tên các class cho các thẻ div chứa nội dung sao cho tương đồng với value của các radio button.
• Khi click vào các radio, thì lấy giá trị, sau đó dựa vào giá trị ta sẽ hiển thị class tương đồng đó.

$('input[type="radio"]').click(function () {
    // Lấy giá trị của radio
    var inputValue = $(this).attr("value");

    // Tên class tương đồng
    var targetBox = $("." + inputValue);

    // Ẩn tất cả các nội dung
    $(".box").not(targetBox).hide();

    // Chỉ hiển thị nội dung của class tương đồng
    $(targetBox).show();
});

Hãy xem ví dụ demo dưới đây:

Bài viết này được đăng tại [kiso.vn]

<div>
    <label><input type="radio" name="colorRadio" value="red"> red</label>
    <label><input type="radio" name="colorRadio" value="green"> green</label>
    <label><input type="radio" name="colorRadio" value="blue"> blue</label>
</div>
<div class="red box">Bạn đã chọn <strong>red radio button</strong></div>
<div class="green box">Bạn đã chọn <strong>green radio button</strong> </div>
<div class="blue box">Bạn đã chọn <strong>blue radio button</strong></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        $('input[type="radio"]').click(function () {
            var inputValue = $(this).attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
        });
    });
</script>

Bạn hãy thử click vào 3 button thì sẽ thấy hiển thị 3 màu khác nhau.