Lấy giá trị radio bằng JavaScript | Laptrinhcanban.com

Lấy giá trị radio bằng JavaScript

Hướng dẫn cách lấy giá trị radio bằng JavaScript. radio là một loại input và bạn sẽ biết cách lấy giá trị radio cũng như kiểm tra radiobutton check Javascript bằng thuộc tính checked của radio sau bài học này.

Tạo nút radio trong HTML

Để tạo nút radio trong HTML, chúng ta sử dụng tới thẻ input có thuộc tính radio như sau:

<input type="radio">

Chúng ta có thể sử dụng kèm thẻ label để hiển thị dòng ký tự phía sau nút radio như sau:

<label><input type="radio">Orange</label>

Các nút radio thường được sử dụng để chọn một từ nhiều nút radio. Để nhóm nhiều nút radio vào cùng một nhóm, hãy đặt thuộc tính name của mỗi nút radio thành cùng một giá trị. Ngoài ra, hãy đặt các giá trị khác nhau cho thuộc tính value của mỗi nút radio để phân biệt các nút radio trong nhóm đó.

<label><input type="radio" name="fruit" value="orange">Orange</label>
<label><input type="radio" name="fruit" value="lemon">Lemon</label>
<label><input type="radio" name="fruit" value="strawberry">Strawberry</label>



Lại nữa, để đặt một trong các nút radio được chọn theo mặc định, hãy đặt thuộc tính checked trên nút radio đó như sau:

<label><input type="radio" name="fruit" value="orange">Orange</label>
<label><input type="radio" name="fruit" value="lemon" checked>Lemon</label>
<label><input type="radio" name="fruit" value="strawberry" >Strawberry</label>



Lấy giá trị radio bằng Javascript

Để kiểm tra radiobutton nào hiện đang được chọn trong cùng một nhóm nút radio, trước tiên hãy sử dụng phương thức getElementsByName để lấy danh sách các nút radio có chung thuộc tính name được chỉ định.

Sau đó, để kiểm tra radiobutton checklấy giá trị radio bằng Javascript cho từng nút radio được lấy, chúng ta sử dụng tới thuộc tính checked của HTMLInputElement Object, là đối tượng đại diên cho input Element với cú pháp sau đây:

element.checked

Khi đó, nếu nút radio được đặt thuộc tính checked thì giá trị true sẽ trả về. Ngược lại nếu nút radio chưa dược checked, giá trị false sẽ trả về.

Ví dụ, để kiểm tra và tìm radiobutton check, chúng ta viết như sau. Nút radio được check nếu tìm thấy sẽ được trả về.

let elements = document.getElementsByName('fruit');
let len = elements.length;
let checkValue = '';

for (let i = 0; i < len; i++){
if (elements.item(i).checked){
checkValue = elements.item(i).value;
}
}

Ngoài ra, sau khi lấy danh sách các nút radio cùng nhóm với cùng name, bằng cách tham chiếu tới nút radio chỉ định thông qua index của nó, chúng ta cũng có thể đặt giá trị radio checked bằng Javascript bằng cách chỉ định trực tiếp các giá trị true false như sau:

let elements = document.getElementsByName('fruit');
elements[2].checked = true;

Sau đây hãy cùng xem demo lấy giá trị radio bằng Javascript với mã HTML dưới đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Samle。</p>

<div>
<label><input type="radio" name="fruit" value="orange">Orange</label>
<label><input type="radio" name="fruit" value="lemon">Lemon</label>
<label><input type="radio" name="fruit" value="strawberry" >Strawberry</label>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function butotnClick(){
let checkValue = '';

for (let i = 0; i < len; i++){
if (fruitRadio.item(i).checked){
checkValue = fruitRadio.item(i).value;
}
}
console.log('Nút radio được chọn có giá trị: ' + checkValue);
}

let fruitRadio = document.getElementsByName('fruit');
let len = fruitRadio.length;



let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', butotnClick);
</script>

</body>
</html>

Với mã lệnh này, chúng ta đã tạo ra 3 nút radio để người dùng lựa chọn, và một nút check để kiểm tra xem nút radio nào đã được lựa chọn. Trong đó, radio thứ 2 được đặt ở trạng thái checked bằng cách sử dụng thuộc tính checked.

Lấy giá trị radio bằng Javascript

Bạn có thể click và lựa chọn một trong số các nút radio, sau đó kiểm tra trạng xem nút radio nào đã được chọn bằng cách click vào nút check như sau:

Lấy giá trị radio bằng Javascript

Kiểm tra và lấy giá trị radio trong form bằng Javascript

Trong trường hợp các nút radio được đặt bên trong một form, chúng ta sẽ có phương pháp khác để lấy và kiểm tra radiobutton nào hiện đang được chọn.

Ví dụ chúng ta có các radio trong form như sau:

<form id="fruitbox">
<label><input type="radio" name="fruit" value="orange">Orange</label>
<label><input type="radio" name="fruit" value="lemon">Lemon</label>
<label><input type="radio" name="fruit" value="strawberry" >Strawberry</label>
</form>

Trước hết, chúng ta dùng getElementById để lấy form từ DOM.

let fruitbox = document.getElementById('fruitbox');

Khi đó, một HTMLFormElement Object đại diện cho form sẽ được trả về. Để thao tác với các nút radio trong form, chúng ta cần lấy ra RadioNodeList Object từ đối tượng HTMLFormElement trên bằng cách dùng thuộc tính elements và chỉ định giá trị name của các nút radio cần lấy như sau:

radioNodeList = fruitbox.elements['fruit'];

Cuối cùng, bằng cách sử dụng thuộc tính value đối với RadioNodeList Object, chúng ta có thể Kiểm tra radiobutton check Javascript và xác định nút radio này đang được check.

let checkValue = radioNodeList.value;

Toàn bộ mã lệnh sẽ là:

let fruitbox = document.getElementById('fruitbox');
radioNodeList = fruitbox.elements['fruit'];
let checkValue = radioNodeList.value;

Ngoài ra chúng ta cũng có thể đặt một nút radion nào đó ở trạng thái được check, bằng cách chi định giá trị true false cho nó, sau khi tham chiếu nút radio đó trong radioNodeList lấy về như sau:

let fruitbox = document.getElementById('fruitbox');
radioNodeList = fruitbox.elements[1].checked = true;

Sau đây hãy cùng xem demo về cách kiểm tra và lấy giá trị radio trong form bằng JavaScript:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Sample</p>

<div>
<form id="fruitbox">
<label><input type="radio" name="fruit" value="orange">Orange</label>
<label><input type="radio" name="fruit" value="lemon">Lemon</label>
<label><input type="radio" name="fruit" value="strawberry" >Strawberry</label>
</form>
</div>

<div>
<input type="button" value="Check" id="checkButton">
</div>

<script>
function buttonClick(){
let checkValue = fruitRadio.elements['fruit'].value;
console.log('Nút radio được chọn có giá trị: ' + checkValue);
}

let fruitRadio = document.getElementById('fruitbox');
fruitRadio.elements[1].checked = true;

let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', buttonClick);
</script>

</body>
</html>

Với mã lệnh này, chúng ta đã tạo ra 3 nút radio để người dùng lựa chọn, và một nút check để kiểm tra xem nút radio nào đã được lựa chọn. Trong đó, radio thứ 2 được đặt ở trạng thái checked bằng cách sử dụng thuộc tính checked.

Lấy giá trị radio bằng Javascript

Bạn có thể click và lựa chọn một trong số các nút radio, sau đó kiểm tra trạng xem nút radio nào đã được chọn bằng cách click vào nút check như sau:

Lấy giá trị radio bằng Javascript

Bắt sự kiện radio trong JavaScript

Khi chúng ta chọn hoặc bỏ chọn một nút radio, sự kiện change sẽ xảy ra.

Do vậy, chúng ta có thể bắt sự kiện radio trong JavaScript thông qua sự kiện change để xử lý radio.

Ví dụ chúng ta có mã để xử lý sự kiện change như sau:

<label><input type="radio" name="fruit" value="orange" id="fruitRadio1">Orange</label>
<label><input type="radio" name="fruit" value="lemon" id="fruitRadio2">Lemon</label>

<script>
function valueChange(){
// Các xử lý sau khi bắt sự kiện radio
}

let fruitRadio1 = document.getElementById('fruitRadio1');
fruitRadio1.addEventListener('change', valueChange);

let fruitRadio2 = document.getElementById('fruitRadio1');
fruitRadio1.addEventListener('change', valueChange);
</script>

Đối với các nút radio trong form, chúng ta có thể bắt sự kiện radio thông qua form với mã lệnh sau:

<form id="fruitform">
<label><input type="radio" name="fruit" value="orange" id="fruitRadio1">Orange</label>
<label><input type="radio" name="fruit" value="lemon" id="fruitRadio2">Lemon</label>
</form>

<script>
function valueChange(){
// Các xử lý sau khi bắt sự kiện radio
}

let travelbox = document.getElementById('fruitform');
travelbox.addEventListener('change', valueChange);
</script>

Sau đây hãy cùng xem demo về cách bắt sự kiện radio trong JavaScript:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Sample</p>

<div>
<label><input type="radio" name="fruit" value="orange" id="fruitRadio1">Orange</label>
<label><input type="radio" name="fruit" value="lemon" checked id="fruitRadio2">Lemon</label>
<label><input type="radio" name="fruit" value="strawberry" id="fruitRadio3">Strawberry</label>
</div>

<script>
function valueChange(event){
console.log('Nút radio được chọn có giá trị: ' + event.currentTarget.value);
}

let fruitRadio1 = document.getElementById('fruitRadio1');
fruitRadio1.addEventListener('change', valueChange);

let fruitRadio2 = document.getElementById('fruitRadio2');
fruitRadio2.addEventListener('change', valueChange);

let fruitRadio3 = document.getElementById('fruitRadio3');
fruitRadio3.addEventListener('change', valueChange);
</script>

</body>
</html>

Với mã lệnh này, chúng ta đã tạo ra 3 nút radio để người dùng lựa chọn. Trong đó, radio thứ 2 được đặt ở trạng thái checked bằng cách sử dụng thuộc tính checked.

Bắt sự kiện radio trong JavaScript

Sau khi click vào mỗi nút radio, sự kiện change sẽ được bắt, và nút radio đã được chọn sẽ được xuất ra màn hình console như sau:

Bắt sự kiện radio trong JavaScript

Một cách tương tự, trong trường hợp các nút radio nằm bên trong form, chúng ta có thể dùng demo sau đây để bắt sự kiện radio đã xảy ra.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Sample</p>

<div>
<form id="fruitform">
<label><input type="radio" name="fruit" value="orange" id="fruitRadio1">Orange</label>
<label><input type="radio" name="fruit" value="lemon" checked id="fruitRadio2">Lemon</label>
<label><input type="radio" name="fruit" value="strawberry" >Strawberry</label>
</form>
</div>

<script>
function valueChange(event){
let checkValue = fruitform.elements['fruit'].value;
console.log('Nút radio được chọn có giá trị: ' + checkValue);
}

let fruitform = document.getElementById('fruitform');
fruitform.elements[1].checked = true;
fruitform.addEventListener('change', valueChange);
</script>

</body>
</html>

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách lấy giá trị radio bằng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.