使用javascript从表单中的多个复选框中读取值

我对javascript非常陌生，有一个问题。我正在使用twitter引导、rails和simpleform。我在表单中使用javascript将复选框替换为切换。我现在尝试在编辑时使用相同的表单向用户显示正确的切换选项

当表单显示在编辑操作中时，将为复选框值（1或0）选择切换。下面的JS代码适用于单个切换元素。我想知道，如果我给它们相同的ID，是否可以循环所有的开关？我的表单中有超过10个复选框，不想重复JS

var n = $('#hole_punch_buttons input[value=1]').length;
if(n === 1){
    $("#hole_punch_buttons a[data-value=1]").addClass('active')
}
else {
    $("#hole_punch_buttons a[data-value=0]").addClass('active')
}

以下是HTML：

<div id="hole_punch_buttons" class="btn-group" data-toggle="buttons-radio">
  <div class="control-group hidden">
           <div class="controls">
               <input class="hidden" id="id_card_design_hole_punch" name="id_card_design[hole_punch]" type="hidden" value="1">
           </div>
       </div>
  <a class="btn ffbtn active" data-value="1">Yes</a>
  <a class="btn sfbtn" data-value="0">No</a>
</div>

对
不

也许有更好的方法来写它

我想知道，如果我给它们相同的ID，是否可以循环所有的开关

不，ID是唯一的。但是，如果使用类，则可以循环使用它们

下面是一个使用

打孔按钮作为类的示例：

<div class="btn-group hole_punch_buttons" data-toggle="buttons-radio">



另一种解决方案是使用
.val（）
检索隐藏输入的值，并将活动类添加到相应锚的数据值中：

$('div.hole_punch_buttons').each(function() {
    var n = $(this).find('input.hidden').val();
    $(this).find('a[data-value=' + n + ']').addClass('active');
});

此解决方案实际查找所有数据值=1并切换“活动”。结果是，每个数据值=1都处于活动状态。不完全是我要找的。我需要检查每个toggle和addClass的隐藏输入值，数据值为1或0，具体取决于数据库中存储的内容。我将以你为例，并向你汇报。谢谢@哦，糟糕，我没有注意到隐藏的输入。马上更新答案。
$('div.hole_punch_buttons').each(function() {
    var n = $(this).find('input.hidden').val();
    $(this).find('a[data-value=' + n + ']').addClass('active');
});