使用javascript在表單中讀取多個複選框的值

我對JavaScript很陌生，並且有一個問題。我正在使用twitter bootstrap，rails和simpleform。我用我的表單中的javascript替換了帶有切換的複選框。我正在嘗試在編輯時向使用相同表單的用戶顯示正確的切換選項。使用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>

也許有更好的方式來它完全寫...

來源

2012-10-28 prodigerati

我想知道是否有可能遍歷所有如果我給他們相同的ID切換？

編號標識是唯一的。但是，如果您使用某個類，則可以遍歷它們。

下面是使用hole_punch_buttons爲一類爲例：

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

而且你重寫JS：

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

Fiddle

另一種解決方案是使用.val()檢索值隱藏的輸入並添加活動類相對應的錨栓的數據值：

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

Fiddle

來源

2012-10-28 22:09:00

將該溶液實際上找到的所有數據值= 1和切換「活動的」。結果是每個數據值= 1都是活動的。不是我正在尋找的東西。我需要根據數據庫中存儲的內容，檢查每個切換和addClass的隱藏輸入的值，數據值爲1或0。我會玩你的榜樣並回報。謝謝！ – prodigerati

@prodigerati哦，我的壞，我沒有注意到隱藏的輸入。以秒爲單位更新答案。 –

@prodigerati更新了答案。 –

使用javascript在表單中讀取多個複選框的值

回答

相關問題