Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 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.
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
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é.
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 [free tuts .net]
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.
