因為之前接到的案子有需要用到AJAX新增資料到後端
而裡面又有用到Radio Button的部分
所以需要取得選到的Radio Button的值
範例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radio Button</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<script>
$(document).ready(function () {
$("#btn_click").click(function () {
console.log($("input[name='radio_button']:checked").val());
});
});
</script>
<body>
<form>
<label><input type="radio" name="radio_button" value="1" checked>OPEN</label>
<label><input type="radio" name="radio_button" value="0">CLOSE</label>
<button type="button" id="btn_click">Click</button>
</form>
</body>
</html>
我這邊只用簡單的Click事件去取得選到的Radio Button
然後有個小技巧
用Label包住Radio Button的話 可以點選字就切換Radio Button
可以不用一定要點選到選項才能切換
使用者體驗感覺較佳喔!
參考資料:
1.https://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery
