如何批量选中所有name属性属于question[0]系列的复选框

所有需要选中的复选框name属性均以question[0]为前缀，直接使用CSS属性前缀选择器即可精准覆盖从question[0][][][]到question[0][3][6][9]的全部目标选项，不会误选其他分组（如question[1]）的复选框，无需编写复杂的范围匹配逻辑。

原生JavaScript实现 #

// 全选方法
function selectAllQuestion0() {
  const targetCheckboxes = document.querySelectorAll('input[type="checkbox"][name^="question[0]"]');
  targetCheckboxes.forEach(item => {
    item.checked = true;
  })
}

// 配套取消全选方法（按需使用）
function unselectAllQuestion0() {
  const targetCheckboxes = document.querySelectorAll('input[type="checkbox"][name^="question[0]"]');
  targetCheckboxes.forEach(item => {
    item.checked = false;
  })
}

绑定到全选按钮即可使用：

<button onclick="selectAllQuestion0()">全选第一题选项</button>

jQuery实现 #

如果项目已引入jQuery，可以用更简洁的写法：

// 全选
$('#selectAllQ0').click(function() {
  $('input:checkbox[name^="question[0]"]').prop('checked', true);
})

// 取消全选
$('#unselectAllQ0').click(function() {
  $('input:checkbox[name^="question[0]"]').prop('checked', false);
})

注意：jQuery 1.6及以上版本操作表单选中状态请使用prop()方法，不要用attr()，否则会出现状态更新异常的问题。

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