jQuery AJAX回调动态追加列表项内单选按钮无法互斥问题

单选按钮的互斥规则是：只有name属性值完全相同的单选按钮才会被浏览器识别为同一组，实现选中互斥。你动态拼接的单选input没有设置name属性，浏览器会将每个按钮判定为独立分组，因此支持同时选中多个。
你之前获取索引始终返回0，是因为类名冲突：你把radiocheck这个类同时赋值给了父级ul列表和列表内的input，选择器匹配到的是ul元素而非单选按钮，自然拿不到正确的元素索引。
另外你代码里写的$(document).off().on(...)会解绑所有挂载在document上的事件，很容易破坏页面其他功能，不建议这么写。

• 给所有动态生成的同组单选按钮设置完全一致的name属性值
• 调整类名，避免父容器和子元素使用相同类名导致选择器匹配错误
• 移除全局off的写法，避免影响其他页面事件

修复后代码 #

$(document).ready(function() {
  $(document).on('click', '#submit', function(e) {
    e.preventDefault();
    var v1 = $('#value1').val();
    var v2 = $('#value2').val();

    $.ajax({
      type: "POST",
      url: "addsettings.php",
      data: {
        v1: v1,
        v2: v2
      },
      success: function(data) {
        if (data.includes("error")) {
          $('#message').html(data);
        } else {
          var result = $.parseJSON(data);
          var radio = result['radio'];
          var value = result['value'];

          // 核心修改：给单选按钮加统一name属性，修改input类名避免和父ul冲突
          var radiocheck = '<li><input type="radio" name="settingRadio" class="radio-item" value="' + radio + '" /></li>';
          var insertvalue = '<li><div>'+ value +'</div></li>';
          // 选择器对应修改为ul的专属类名
          $('.result> .radiocheck-list').append(radiocheck);
          $('.result> .value-list').append(insertvalue);
        }
      }
    });
  });
});

对应的HTML部分调整类名避免冲突：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="submit">提交</button>
<input type="text" id="value1" />
<input type="text" id="value2" />
<div id="message"></div>
<div class="result">
  <!-- 给ul设置独立类名，和内部input类名区分开 -->
  <ul class="radiocheck-list"></ul>
  <ul class="value-list"></ul>
</div>

改完之后同组单选按钮就能正常互斥切换，后续获取选中值直接用$('input[name="settingRadio"]:checked').val()即可。

内容的提问来源于stack exchange，提问作者Hadi Mirdamadi