獲得具有選中的複選框

Question

我一直在這幾天行的所有數據。我需要幫助。我試圖循環遍歷整個表，只有當該行中的複選框被選中並且serializeArray將它們放入數組中時，纔可以獲得該行中的所有<input>數據。現在，如果我選中一個複選框，它也會從其他行抓取所有<input>數據。

http://jsfiddle.net/h82om7sf/20/

$(function() 
{ 
    $('#submitButton').click(function(){ 

     var data = new Array(); 
     var i=0; 
     $('#add table').find('input[type=checkbox]:checked').each(function(){ 

      data[i] = $('#add :input').serializeArray(); 
      i++; 
     }); 

     alert(data.toSource()); 

    }); 
}); 


<div id="add"> 
     <table> 
      <tr> 
       <button id ="submitButton" type="button">Build</button> 
      </tr> 
      <tr> 
       <td><input id="name1" type="checkbox" name="name" value="checkboxValue0"/></td> 
       <td>Id<input type="hidden" name="id" value="1"/></td> 
       <td> 
        <input type="text" placeholder="Placeholder" name="address"/> 
       </td> 
       <td> 
        <input type="radio" name="radioButton0" value="1" />radioButton1 1 
        <input type="radio" name="radioButton0" value="2" />radioButton1 2 
       </td> 
      </tr> 
      <tr> 
       <td><input id="name2" type="checkbox" name="name" value="checkboxValue0"/></td> 
       <td>Id<input type="hidden" name="id" value="2"/></td> 
       <td> 
        <input type="text" placeholder="Placeholder" name="address"/> 
       </td> 
       <td> 
        <input type="radio" name="radioButton1" value="1" />radioButton2 1 
        <input type="radio" name="radioButton1" value="2" />radioButton2 2 
       </td> 
      </tr> 

      <tr> 
       <td><input id="name3" type="checkbox" name="name" value="checkboxValue0"/></td> 
       <td>Id<input type="hidden" name="id" value="3"/></td> 
       <td> 
        <input type="text" placeholder="Placeholder" name="address"/> 
       </td> 
       <td> 
        <input type="radio" name="radioButton2" value="1" />radioButton3 1 
        <input type="radio" name="radioButton2" value="2" />radioButton3 2 
       </td> 
      </tr>    
     </table> 
    </div> 

Answer 1

在這裏你去： 使用$.each()或者$.map()遍歷選中行 並收集所有設置的值由用戶創建並創建一個對象數組。

演示用$.each()：（在控制檯F12結果）> JSnippet Demo with each() <

演示用$.map()：（結果在控制檯F12）> JSnippet Demo with map() <

使用$.each()的碼（不包括HTML的變化）：

$('#submitButton').click(function(){ 
     var values = []; 
     $("#add input[name=name]:checked").each(function(){ 
      row = $(this).closest("tr"); 
      values.push({ 
       checkbox_id : $(this).val(), 
       hidden_id : $(row).find("input[name=id]").val(), 
       address  : $(row).find("input[name=address]").val(), 
       radio  : $(row).find('input[type=radio]:checked').val() || "not selected"  
      }); 
     }); 
     console.log(values); 
     /* Do some stuff with the values collected */ 
    }); 

該代碼使用$.map()（沒有HTML更改）：

$('#submitButton').click(function(){ 
     var values = $("#add table input[name=name]:checked").map(function() { 
       row = $(this).closest("tr"); 
       return { 
         checkbox_id : $(this).val(), 
         hidden_id : $(row).find("input[name=id]").val(), 
         address  : $(row).find("input[name=address]").val(), 
         radio  : $(row).find('input[type=radio]:checked').val() || "not selected"  
         } 
      }).get(); 
     console.log(values); 
    }); 

Answer 2

您可以使用.map

$('#submitButton').click(function() { 
    var values = $("#add table input[name=name]:checked").map(function() { 
     return $(this).closest("tr").find("input[name=address]").val(); 
    }).get(); 

    //"values" is now an array of your values 
}); 

的演示，當然：http://jsfiddle.net/h82om7sf/4/