动态生成的Checkbox无法正确返回AnalysisFlag布尔值该如何修复？

核心问题定位 #

你的代码主要存在4个问题：

1. 动态生成的checkbox ID重复，无法区分不同选项的勾选状态
2. 未勾选的checkbox默认不会被表单序列化提交，所以无法拿到false值
3. GetDynamicTextBox方法使用逗号运算符返回值，仅会返回最后一个allVals，文本框元素直接丢失
4. 提交逻辑仅读取全局唯一的隐藏域值，无法关联每个选项对应的AnalysisFlag

具体修改方案 #

1. 新增checkbox状态同步逻辑（全局通用，兼容动态生成元素） #

// 监听所有checkbox变更，同步更新对应隐藏域的布尔值
$(document).on('change', 'input[type="checkbox"].checklistitem', function() {
  const optionIndex = $(this).closest('.input-group').attr('id').replace('TextBoxContainer', '');
  $(`#AnalysisFlag_${optionIndex}`).val(this.checked);
});

2. 修改动态新增选项方法AddTextBox #

function AddTextBox() {
  const newIndex = x + 1;
  $('#TextBoxContainer' + x).after(`<br id='Removebr${newIndex}'>
  <div class='input-group' id='TextBoxContainer${newIndex}'>
    <div class='input-group-prepend'>
      <div class='input-group-text'> 
        ${String.fromCharCode(j)} &nbsp; 
        <input type='checkbox' class='checklistitem' value='true' id='DynamicAnalysisFlag_${newIndex}' name='DynamicAnalysisFlag'>
      </div>
    </div>
    <input autocomplete='off' class='form-control test-option test-option${newIndex} text-box single-line' data-val='true' data-val-required='Answer is required' id='option_${newIndex}' name='DynamicTextBox' placeholder='Your Answer' type='text' value=''>
    <!-- 新增专属隐藏域存AnalysisFlag，默认值为false -->
    <input type='hidden' id='AnalysisFlag_${newIndex}' name='AnalysisFlag_${newIndex}' value='false'>
    <span class='field-validation-valid text-danger' data-valmsg-for='AnalysisFlag' data-valmsg-replace='true'></span>
  </div>`);
  j++;
  x++;
}

3. 修改初始HTML的固定选项结构 #

<div id="radio" class="col-xs-12">
  <br id="Removebr1">
  <div class="input-group" id="TextBoxContainer1">
    <div class="input-group-prepend">
      <div class="input-group-text">
        A &nbsp;
        <input type="checkbox" class='checklistitem' value="true" id="radio1" name="AnalysisFlag">
      </div>
    </div>
    <input autocomplete="off" class="form-control test-option test-option1  text-box single-line" data-val="true" data-val-required="Option is required" id="opt1" name="opt1" placeholder="Your Answer" type="text" value="">
    <span class="field-validation-valid text-danger" data-valmsg-for="opt1" data-valmsg-replace="true"></span>
    <!-- 固定选项的AnalysisFlag隐藏域，默认false -->
    <input type="hidden" id="AnalysisFlag_1" name="AnalysisFlag_1" value="false">
    <!-- 提交用的全局隐藏域，存所有选项的JSON数据 -->
    <input data-val="true" data-val-required="The AnalysisFlag field is required." id="hiddenRadioValue" name="AnalysisFlag" type="hidden" value="">
    <br>
  </div>
</div>

4. 修改提交按钮的逻辑 #

$('#btnNext').on('click', function() {
  // 组装所有选项的内容和对应AnalysisFlag
  const allOptions = [];
  $('.input-group[id^="TextBoxContainer"]').each(function() {
    allOptions.push({
      text: $(this).find('input[type="text"]').val(),
      analysisFlag: $(this).find('input[id^="AnalysisFlag_"]').val() === 'true'
    });
  });
  // 转成JSON存入全局隐藏域，后端直接解析即可
  $('#hiddenRadioValue').val(JSON.stringify(allOptions));
});

5. 重写回显用的GetDynamicTextBox方法，废弃原有错误逻辑 #

function GetDynamicTextBox(item) {
  const newIndex = x + 1;
  const checkedAttr = item.analysisFlag ? 'checked' : '';
  const html = `<br id='Removebr${newIndex}'>
  <div class='input-group' id='TextBoxContainer${newIndex}'>
    <div class='input-group-prepend'>
      <div class='input-group-text'> 
        ${String.fromCharCode(j)} &nbsp; 
        <input type='checkbox' class='checklistitem' ${checkedAttr} value='true' id='DynamicAnalysisFlag_${newIndex}' name='DynamicAnalysisFlag'>
      </div>
    </div>
    <input autocomplete='off' class='form-control test-option test-option${newIndex} text-box single-line' data-val='true' data-val-required='Answer is required' id='option_${newIndex}' name='DynamicTextBox' placeholder='Your Answer' type='text' value='${item.text}'>
    <input type='hidden' id='AnalysisFlag_${newIndex}' name='AnalysisFlag_${newIndex}' value='${item.analysisFlag}'>
    <span class='field-validation-valid text-danger' data-valmsg-for='AnalysisFlag' data-valmsg-replace='true'></span>
  </div>`;
  j++;
  x++;
  return html;
}

// 回显逻辑同步修改，移除不安全的eval
$(function() {
  var values = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Values));
  if (values?.length) {
    $("#radio").html("");
    x = 1;
    j = 65;
    values.forEach(item => {
      $("#radio").append(GetDynamicTextBox(item));
    });
  }
});

实现效果说明 #

• 每个选项都对应独立的AnalysisFlag存储，勾选时自动更新为true，未勾选默认false，表单提交时永远会携带对应值
• 动态新增/删除选项时，状态同步逻辑自动生效，无需额外绑定事件
• 所有选项和对应状态关联准确，不会出现错位问题

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