要捕獲和處理radio選中事件,可以通過給radio按鈕添加事件監聽器來實現。具體步驟如下:
首先,找到需要添加事件監聽器的radio按鈕元素,可以使用JavaScript的document.querySelector()方法或者通過給radio按鈕設置id屬性來獲取元素。
使用addEventListener()方法為該radio按鈕元素添加一個"change"事件監聽器,當radio按鈕被選中時觸發。
在事件監聽器中編寫處理選中事件的代碼,例如可以使用event.target來獲取被選中的radio按鈕元素,并進一步對其進行操作。
示例代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>Radio選中事件</title>
</head>
<body>
<input type="radio" id="radio1" name="radios" value="option1"> Option 1<br>
<input type="radio" id="radio2" name="radios" value="option2"> Option 2<br>
<input type="radio" id="radio3" name="radios" value="option3"> Option 3<br>
<script>
const radio1 = document.getElementById('radio1');
const radio2 = document.getElementById('radio2');
const radio3 = document.getElementById('radio3');
radio1.addEventListener('change', function(event) {
if (event.target.checked) {
console.log('Option 1 selected');
}
});
radio2.addEventListener('change', function(event) {
if (event.target.checked) {
console.log('Option 2 selected');
}
});
radio3.addEventListener('change', function(event) {
if (event.target.checked) {
console.log('Option 3 selected');
}
});
</script>
</body>
</html>
在上面的示例中,我們為三個radio按鈕分別添加了"change"事件監聽器,當某個radio按鈕被選中時,控制臺會輸出相應的提示信息。您可以根據實際需求在事件監聽器中編寫其他處理邏輯。