Cách ẩn hiện nội dung bằng jQuery khi click vào radio button 1
RUN
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Show Hide Elements Using Radio Buttons</title> <style> .box{ color: #fff; padding: 20px; display: none; margin-top: 20px; } .red{ background: #ff0000; } .green{ background: #228B22; } .blue{ background: #0000ff; } </style> </head> <body> <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> </body> </html>
PHÓNG TO