如何獲取複製複選框值

Question

我有包含複選框的html代碼，我試圖在克隆時獲取這些值，但是我沒有正確獲取。 這裏是我的html代碼：

<div id="divHideMeds"> 
    <div class="copymeds"> 
    <div class="form-group"> 
     <label class=" control-label col-md-3">Times to give</label> 
      <div class="checkbox-list col-md-9"> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="breakfast" value="Breakfast"> Breakfast 
      </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" id="lunch" value="Lunch"> Lunch 
      </label> 
       <label class="checkbox-inline"> 
        <input type="checkbox" id="dinner" value="Dinner"> Dinner 
       </label> 
      <label class="checkbox-inline"> 
        <input type="checkbox" id="bed" value="Bed"> Bed 
      </label> 
      </div> 
     </div> 
     <div class="add"> 
     <button type="button" id="abc">Add More</button> 
    </div> 
    </div> 
<div> 

這裏是我的js代碼：

$(".abc").click(function (e) { 
    var cloned = $(".copymeds:first").clone(true).appendTo('#divHideMeds'); 
    }); 

我嘗試了，得到了下面的複選框值：

$('.copymeds').each(function() { 
     arr.push({ 
     forBreakfast:$("#breakfast",this).val(), 
     forLunch:$("#lunch",this).val(), 
     forDinner:$("#dinner",this).val(), 
     beforeBed:$("#bed",this).val(), 
     }); 
}); 

在這裏，我有問題，複選框只剩下的數據將完美傳出。我的問題是我只獲得第一個克隆值，但沒有獲得多個克隆數據複選框values.please幫助我如何獲取複選框值val如果我們有2個以上的克隆，請使用數據。

Answer 1

您的頁面上存在重複的ID（克隆後）。確保你讓它們獨一無二（比如說，通過爲每一個添加索引）或者將它們切換到類。然後你就可以選擇其中的一個，否則它只會選擇第一個（而且應該是唯一的！）。

 <label class="checkbox-inline"> 
     <input type="checkbox" id="breakfast" value="Breakfast"> Breakfast 
    </label> 
    <label class="checkbox-inline"> 
     <input type="checkbox" id="lunch" value="Lunch"> Lunch 
    </label> 
     <label class="checkbox-inline"> 
      <input type="checkbox" id="dinner" value="Dinner"> Dinner 
     </label> 
    <label class="checkbox-inline"> 
      <input type="checkbox" id="bed" value="Bed"> Bed 
    </label> 

所以，問題的是：breakfast，lunch，dinner和bed。他們都得到克隆。