JavaScript/jQuery：获取单选按钮选中值的实用指南

<div class="d-flex justify-content-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
    <label class="form-check-label" for="inlineRadio1">5 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
    <label class="form-check-label" for="inlineRadio2">4 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
    <label class="form-check-label" for="inlineRadio3">3 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
    <label class="form-check-label" for="inlineRadio4">2 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
    <label class="form-check-label" for="inlineRadio5">1 star</label>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 你的其他脚本代码 -->

$(document).ready(function() {
  // 为所有单选按钮绑定点击事件
  $(':radio').click(function() {
    // `this`指向当前被点击的DOM元素
    console.log("jQuery获取的值：", this.value);
    // 在这里可以对获取到的值进行进一步处理，例如更新UI、发送Ajax请求等
  });
});

document.addEventListener('DOMContentLoaded', function() {
  // 使用name属性选择器获取所有目标单选按钮
  const radioButtons = document.querySelectorAll('input[name="inlineRadioOptions"]');

  // 遍历所有单选按钮，并为每个按钮添加'change'事件监听器
  radioButtons.forEach(radio => {
    radio.addEventListener('change', function() {
      // `this`指向当前触发事件的DOM元素
      console.log("纯JavaScript获取的值：", this.value);
      // 在这里处理获取到的值
    });
  });
});

document.addEventListener('DOMContentLoaded', function() {
  /**
   * 获取指定name属性的单选按钮组中当前选中的值。
   * @param {string} name - 单选按钮组的name属性值。
   * @returns {string|null} - 选中的值，如果没有选中则返回null。
   */
  function getSelectedRadioValue(name) {
    const radios = document.querySelectorAll(`input[name="${name}"]`);
    for (const radio of radios) {
      if (radio.checked) { // 检查单选按钮的checked属性
        return radio.value;
      }
    }
    return null; // 如果没有选中任何一个
  }

  // 示例一：页面加载后立即获取一次值
  const selectedValueOnLoad = getSelectedRadioValue('inlineRadioOptions');
  if (selectedValueOnLoad) {
    console.log("页面加载时选中的值：", selectedValueOnLoad);
  } else {
    console.log("页面加载时没有预设选中值。");
  }

  // 示例二：假设有一个提交按钮，点击时获取值
  // 请确保页面中存在一个ID为 'submitBtn' 的按钮
  const submitButton = document.getElementById('submitBtn'); 
  if (submitButton) {
    submitButton.addEventListener('click', function() {
      const selectedValue = getSelectedRadioValue('inlineRadioOptions');
      if (selectedValue) {
        console.log("提交时选中的值：", selectedValue);
        // 这里可以执行表单提交或Ajax请求等操作
      } else {
        console.log("请选择一个选项后再提交。");
      }
    });
  }
});