Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Lấy Giá Trị Của Radio Và Select Button Bằng JS

Cách Lấy Giá Trị Của Radio Và Select Button Bằng JS


Ngày 16 Tháng 11 Năm 2021

Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách để lấy giá trị của thẻ select và radio trong trang web bằng Javascript nhé!

Cách Get Value Input Radio

Trong phần này mình sẽ hướng dẫn bạn cách để lấy giá trị của thẻ input type=radio thông qua javascript nhé. Để hiểu rõ hơn chúng ta hãy đi vào tìm hiểu đoạn mã sau nha:

HTML:

Đầu tiên chúng ta sẽ tạo cấu trúc form html với các nút radio bằng đoạn code sau nha:

<!--www.niemvuilaptrinh.com-->
<form id="elements" onchange="showValue()">
  <input type="radio" id="r1" name="element" value="1">  Giá Trị 1
  <input type="radio" id="r2" name="element" value="2"> Giá Trị 2
  <input type="radio" id="r3" name="element" value="3" checked="checked"> Giá Trị 3 
</form>
<div id="results"></div>

Javascript:

Trong phần tiếp theo mình sẽ viết hàm showValue() để hiển thị giá trị của radio button mỗi khi người dùng chọn vào từng phần tử trong form bằng thuộc tính onchange trong js nha.

const ele = document.forms.elements.elements["element"];
showValue();
function showValue(){
    document.getElementById('results').innerHTML = `Giá Trị ${ele.value}`;
}

Và kết quả bạn xem trên Codepen nha:

See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen.

Còn nếu bạn muốn sử dụng Jquery để lấy giá trị của ô radio button thì có thể sử dụng đoạn mã sau nha:

$('input[type="radio"][name="element"]:checked').val();

Nếu bạn muốn tham khảo thêm về radio button cho phát triển web thì truy cập ở đây nha.

Cách Get Value Select Element

Trong phần này chúng ta sẽ đi vào tìm hiểu cách lấy giá trị select option của component dropdow thông qua đoạn code dưới đây nha.

HTML:

<!--www.niemvuilaptrinh.com-->
<select id="elements" onchange="showValue()">
    <option value="1">Giá Trị 1</option>
    <option value="2">Giá Trị 2</option>
    <option value="3">Giá Trị 3</option>
</select>
<div id="results"></div>

Javascript:

function showValue(){
    var ele = elements.value;
    document.getElementById('results').innerHTML =  `Giá Trị ${ele}`;
}

Và kết quả bạn xem dự án trên Codepen sau đây nha:

See the Pen get value select dropdown by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về thẻ select cho phát triển website thì truy cập ở đây nha.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách get value cho radio button và dropdown dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.