通过一个按钮完成选中单选框和提交表单的功能
时间: 2024-03-02 12:48:51 浏览: 58
你可以通过以下代码实现:
```
<form id="myForm">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
<button id="myButton">提交</button>
<script>
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(event) {
event.preventDefault(); // 防止表单自动提交
var selectedRadio = document.querySelector('input[name="gender"]:checked');
if (selectedRadio) {
var form = document.getElementById("myForm");
form.submit(); // 提交表单
} else {
alert("请选择性别"); // 提示用户选择性别
}
});
</script>
```
这段代码首先创建了一个表单和一个提交按钮。然后通过JavaScript代码获取提交按钮并添加了一个点击事件监听器。当用户点击提交按钮时,代码会阻止默认表单提交行为,然后获取被选中的单选框的值。如果有单选框被选中,则提交表单;否则,弹出提示框要求用户选择性别。
阅读全文