单击后单选按钮发送表单 - Javascript

本文将介绍如何使用Javascript实现单击后单选按钮发送表单的功能。

1. HTML基础

首先需要在HTML文件中添加以下基本代码：

<form>
  <label>
    <input type="radio" name="option" value="option1">
    Option 1
  </label>
  <label>
    <input type="radio" name="option" value="option2">
    Option 2
  </label>
  <button id="submit-btn">Submit</button>
</form>

这里我们创建了一个表单，包含两个单选按钮和一个提交按钮。

2. JS实现

接下来，我们需要编写Javascript代码，以在单选按钮被单击时提交表单。

const submitBtn = document.getElementById('submit-btn');
const radios = document.querySelectorAll('input[type="radio"]');

radios.forEach(radio => {
  radio.addEventListener('click', () => {
    submitBtn.click();
  });
});

我们首先获取所有单选按钮和提交按钮的引用，并在单选按钮上添加一个事件监听器。

当单选按钮被单击时，我们将触发click事件并自动提交表单。这里我们将使用submit按钮的click()方法来实现自动提交表单。

3. 结论

现在我们已经完成了单击后单选按钮发送表单的Javascript实现。在此过程中，我们学习了如何使用HTML来创建表单，如何使用Javascript实现自动表单提交。

完整的代码如下：

<form>
  <label>
    <input type="radio" name="option" value="option1">
    Option 1
  </label>
  <label>
    <input type="radio" name="option" value="option2">
    Option 2
  </label>
  <button id="submit-btn">Submit</button>
</form>

<script>
  const submitBtn = document.getElementById('submit-btn');
  const radios = document.querySelectorAll('input[type="radio"]');

  radios.forEach(radio => {
    radio.addEventListener('click', () => {
      submitBtn.click();
    });
  });
</script>

现在可以尝试单击单选按钮并自动提交表单。