获得具有选中的复选框

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/