jQuery：获取指定div内选中复选框的整数值

我来帮你搞定这个需求——结合你给出的问卷HTML结构（用Jinja2渲染的），下面是完整的实现方案：

首先，先补全你的HTML模板（你给出的代码片段未写完），确保每个复选框的value绑定回复对应的整数值，同时给元素加上便于定位的标记：

<div class="row" id="replies-{{ question.id }}">
  {% for reply in func.replies(question.id) %}
    <div class="col-md-12">
      <div class="btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-block btn-secondary">
          <!-- 这里假设reply.id是你需要的整数值，若不是则替换成实际字段，比如reply.score -->
          <input type="checkbox" autocomplete="off" value="{{ reply.id }}" data-question="{{ question.id }}">
          {{ reply.text }} <!-- 显示回复的文本内容 -->
        </label>
      </div>
    </div>
  {% endfor %}
</div>

接下来是核心的JavaScript函数，分两种常用场景实现：

1. 获取单个问题的选中回复整数值 #

这个函数接收问题ID作为参数，返回该问题下所有选中复选框对应的整数值数组：

function getSelectedRepliesForQuestion(questionId) {
  // 定位到对应问题的容器
  const questionDiv = document.getElementById(`replies-${questionId}`);
  if (!questionDiv) {
    console.warn(`找不到ID为replies-${questionId}的问题容器`);
    return [];
  }
  
  // 筛选出该容器内所有被选中的复选框
  const checkedBoxes = questionDiv.querySelectorAll('input[type="checkbox"]:checked');
  
  // 把复选框的value转换成整数，返回结果数组
  return Array.from(checkedBoxes).map(box => parseInt(box.value, 10));
}

使用示例：

// 获取ID为5的问题的选中回复值
const selectedValues = getSelectedRepliesForQuestion(5);
console.log(selectedValues); // 输出类似 [2, 7, 11] 的整数数组

2. 获取所有问题的选中回复整数值 #

如果需要一次性获取所有问题的选中结果，这个函数会返回一个结构化对象，键是问题ID，值是对应问题的选中整数值数组：

function getAllSelectedReplies() {
  const results = {};
  // 找到所有以replies-开头的问题容器
  const allQuestionDivs = document.querySelectorAll('div[id^="replies-"]');
  
  allQuestionDivs.forEach(div => {
    // 从容器ID中提取问题ID
    const questionId = div.id.replace('replies-', '');
    // 复用单个问题的逻辑获取选中值
    results[questionId] = getSelectedRepliesForQuestion(questionId);
  });
  
  return results;
}

使用示例：

const allSelected = getAllSelectedReplies();
console.log(allSelected);
// 输出类似 { "5": [2,7], "8": [3], "10": [] } 的对象

可选：jQuery版本（如果项目依赖jQuery） #

如果你的项目已经在用jQuery，可以用更简洁的写法：

// 获取单个问题的选中值
function getSelectedRepliesForQuestion(questionId) {
  return $(`#replies-${questionId} input:checkbox:checked`)
    .map(function() { return parseInt($(this).val(), 10); })
    .get();
}

// 获取所有问题的选中值
function getAllSelectedReplies() {
  const results = {};
  $('div[id^="replies-"]').each(function() {
    const questionId = $(this).attr('id').replace('replies-', '');
    results[questionId] = getSelectedRepliesForQuestion(questionId);
  });
  return results;
}

关键注意事项 #

• 确保reply.id是你需要的整数值，如果回复对应的整数字段不是id，记得替换成实际字段（比如reply.points）。
• parseInt第二个参数传10是为了避免浏览器把以0开头的数字错误解析为八进制。
• 如果需要在表单提交时收集这些值，可以在提交事件中调用上述函数，把结果附加到表单数据里。

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