contenteditable容器中Radio Button选中状态无法存入MySQL求助

我在带有contenteditable属性的div容器内放置了若干单选按钮，通过AJAX请求将容器内容提交至MySQL数据库。提交后其他内容均可正常存储，但单选按钮的checked="checked"选中状态未被正确记录，求解决办法。

原代码如下：

<div class="big_wrapper" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 10px;" contenteditable>

-----------------------TEXT HERE-------------------------
-----------------------TEXT HERE-------------------------
-----------------------TEXT HERE-------------------------

<input type="radio" name="r1" value="choice 1" /> Choice 1

<br><br>
-----------------------TEXT HERE-------------------------

<input type="radio" name="r1" value="choice 2" /> Choice 2

<br><br>
-----------------------TEXT HERE-------------------------

<input type="radio" name="r1" value="choice 3" /> Choice 3

<br><br>
-----------------------TEXT HERE-------------------------

</div>

-----------------------TEXT HERE-------------------------
-----------------------TEXT HERE-------------------------
-----------------------TEXT HERE-------------------------

<button class="btn btn-blue btn-effect" type="button" id="mybutt">Envoyer</button>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
  $('#mybutt').click(function(){
    var myTxt = $('.big_wrapper').html();
    $.ajax({
        type: 'post',
        url:  '/sent_data.php',
        data: 'q1=' +myTxt+ ''
  });
});
</script>

contenteditable容器的html()方法获取的是初始HTML结构，不会自动同步表单控件的动态状态（比如单选框的checked）。因为单选框的选中状态属于DOM的属性（property），而非HTML的属性（attribute），直接提取innerHTML无法拿到实时的checked="checked"标记。

提供两种可行的处理方式：

方式一：提交前同步DOM状态到HTML属性 #

在获取容器HTML之前，手动遍历所有单选按钮，将当前选中状态同步为HTML的checked属性：

$('#mybutt').click(function(){
    // 同步单选框的选中状态到HTML属性
    $('.big_wrapper input[type="radio"]').each(function(){
        if (this.checked) {
            $(this).attr('checked', 'checked');
        } else {
            $(this).removeAttr('checked');
        }
    });
    
    var myTxt = $('.big_wrapper').html();
    $.ajax({
        type: 'post',
        url: '/sent_data.php',
        data: { q1: myTxt } // 使用对象形式传递参数，自动处理编码
    });
});

方式二：单独提取选中值，后端合并到HTML #

单独获取单选框的选中值，和容器HTML一起提交，后端再将选中状态合并到HTML中存储：

前端代码修改 #

$('#mybutt').click(function(){
    var myTxt = $('.big_wrapper').html();
    // 获取选中的单选框值
    var selectedRadio = $('.big_wrapper input[name="r1"]:checked').val();
    
    $.ajax({
        type: 'post',
        url: '/sent_data.php',
        data: { 
            q1: myTxt,
            selected_r1: selectedRadio
        }
    });
});

后端（PHP）处理示例 #

$htmlContent = $_POST['q1'];
$selectedValue = $_POST['selected_r1'];

// 将选中状态合并到HTML中
if (!empty($selectedValue)) {
    $htmlContent = str_replace(
        'value="' . $selectedValue . '"',
        'value="' . $selectedValue . '" checked="checked"',
        $htmlContent
    );
}

// 后续将$htmlContent存储到MySQL数据库

• 避免使用字符串拼接传递AJAX参数，改用对象形式data: { ... }，jQuery会自动处理特殊字符的编码，防止参数错误。
• 如果允许用户编辑contenteditable内的内容，存储前要做XSS防护，比如使用HTML过滤函数清理危险标签。

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