BÀI TẬP JQUERY
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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()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:

Demo RUN
<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.

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Cách dùng :contains() Selector trong jQuery

Top