jQuery, получение массива значений, соответствующих выбранным флажкам

Question

<form id="myform"> 
<table>   
<tbody> 
    <tr> 
    <td class="textcenter"> 
     <input type="checkbox" name="domains[]" value="mydomainname.com" checked=""> 
     <input type="hidden" name="action[]" value="buy"> 
    </td> 
    <td>mydomainname.com</td> 
    <td >Available! Choose the number of years</td> 
    <td class="textcenter"> 
     <select class="leftmargin10 bottommargin10 form-control" name="period[]"> 
      <option value="1">1 Year/s @ $24.99</option> 
      <option value="2">2 Year/s @ $49.98</option> 
      <option value="3">3 Year/s @ $74.97</option> 
     </select> 
    </td> 
    </tr> 
    <tr> 
    <td class="textcenter"> 
     <input type="checkbox" name="domains[]" value="mydomainname.net"> 
     <input type="hidden" name="action[]" value="transfer"> 
    </td> 
    <td>mydomainname.net</td> 
    <td>Available! Choose the number of years</td> 
    <td class="textcenter"> 
     <select class="leftmargin10 bottommargin10 form-control" name="period[]"> 
      <option value="1">1 Year/s @ $24.99</option> 
      <option value="2">2 Year/s @ $49.98</option> 
      <option value="3">3 Year/s @ $74.97</option> 
     </select> 
    </td></tr> 
</tbody></table> 

<button type="submit" name="submitButton" class="btn-yellow" value="Buy">Register Now!</button> 
</form> 

Будет 10-15 строк, как указано выше.

На стороне JQuery У меня есть:

$("#domainform").submit(function(){ 
     event.preventDefault(); 
     var domains= $('input[name="domains[]"]:checked').map(function(){ 
       return $(this).val(); 
      }).get(); 

     var action= $('input[name="action[]"]').map(function(){ 
      return $(this).val(); 
      }).get(); 

     var period= $('select[name="period[]"]').map(function(){ 
      return $(this).val(); 
      }).get(); 
}); 

Этот код в настоящее время дает мне правильные значения флажка, но он дает значение для всех выпадающих (независимо от CheckBox статусов). Как связать эти два вместе и получить только значения для выпадающих списков, соответствующих установленным флажкам.

Спасибо!

Answer 1

Заменить

var action= $('input[name="action[]"]').map(function(){ 
    return $(this).val(); 
}).get(); 

var period= $('select[name="period[]"]').map(function(){ 
    return $(this).val(); 
}).get(); 

с

var action= $('input[name="action[]"]').map(function(){ 
    if ($(this).prev().is(':checked')) 
     return $(this).val(); 
}).get(); 

var period= $('select[name="period[]"]').map(function(){ 
    if ($(this).parent().prev().prev().prev().children('input[type="checkbox"]').is(':checked')) 
     return $(this).val(); 
}).get(); 

Это не очень элегантно, но вы двигаетесь через DOM, чтобы получить соответствующий флажок.

См. Это JSFiddle