如何获取复制复选框值

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。他们都得到克隆。