Iterieren über Kontrollkästchen in jQuery

Question

Ich habe eine Tabelle mit Kontrollkästchen, ein Dropdown-Menü und andere begleitende Daten.

Ich würde gerne über die Zeilen, die überprüft wurden, iterieren und ziehen Sie die Daten, fügen Sie diese Daten in ein Wörterbuch, dann in ein Master-Array.

Es scheint die richtigen Zeilen mit Kontrollkästchen zu finden, aber meine for-Schleife zieht nicht jede Zeile richtig. Hier ist mein js Code:

$("#thechecked").click(function(){ 
    var send_list = [] 
    $('#mytable').find(':checkbox:checked').each(function() { 
     var dict = {}; 
     var value = $("#presetChoosen").val(); 
     var filename = $("#filename").text(); 
     dict['filename'] = filename 
     dict['value'] = value 
     send_list.push(dict) 

    }); 
    console.log(send_list) 

}); 

FULL EXAMPLE IN JSFIDDLE

Was mache ich falsch?

Answer 1

Sie sollten nicht überall die gleichen IDs verwenden wie beim select-Element. Id-Elemente sollen einzigartig sein.

Ich habe einige jQuery-Methoden (parent(), find(), next()) verwendet, um die spezifischen Werte Ziel:

var value = $(this).parent().parent().find("select option:checked").val(); 
var filename = $(this).parent().next("td").text(); 

Nachfolgend finden Sie eine Arbeits Schnipsel von dem, was Sie versuchen zu erreichen:

$("#thechecked").click(function() { 
 
    var send_list = [] 
 
    $('#mytable').find(':checkbox:checked').each(function() { 
 
    var dict = {}; 
 
    var value = $(this).parent().parent().find("select option:checked").val(); 
 
    var filename = $(this).parent().next("td").text(); 
 
    dict['filename'] = filename 
 
    dict['value'] = value 
 
    send_list.push(dict) 
 

 
    }); 
 
    console.log(send_list) 
 

 
});

tr, 
 
td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
    <thead> 
 
    <tr id="mq"> 
 
     <td><input type="checkbox" /></td> 
 
     <td>What</td> 
 
     <td>Meta</td> 
 
     <td>Preset</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="1"> 
 
     <td><input type="checkbox" /></td> 
 
     <td id="filename_1">Underthesea</td> 
 
     <td>1920x1080</td> 
 
     <td> <select id="presetChoosen_1">   
 
       <option value="Watch">Watch</option> 
 
       <option value="Delete">Delete</option> 
 
       <option value="None">None</option> 
 
       <option value="Other">Other</option> 
 
     </select></td> 
 
    </tr> 
 
    <tr id="2"> 
 
     <td><input type="checkbox" /></td> 
 
     <td id="filename_2">Overthehill</td> 
 
     <td>1280x720</td> 
 
     <td> <select id="presetChoosen_2" value="asd">   
 
       <option value="Watch">Watch</option> 
 
       <option value="Delete">Delete</option> 
 
       <option value="None">None</option> 
 
       <option value="Other">Other</option> 
 
     </select></td> 
 
    </tr> 
 
    <tr id="3"> 
 
     <td><input type="checkbox" /></td> 
 
     <td id="filename">Mocking</td> 
 
     <td>1280x720</td> 
 
     <td> <select id="presetChoosen" value="asd">   
 
       <option value="Watch">Watch</option> 
 
       <option value="Delete">Delete</option> 
 
       <option value="None">None</option> 
 
       <option value="Other">Other</option> 
 
     </select></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<button id="thechecked">Get Checked</button>

Answer 2

Sie verwenden ID-Attribute erneut. IDs sollten eindeutig sein - und ich glaube, dass es ein WC3-Validierungsfehler ist, die gleiche ID in HTML erneut zu verwenden.

Sie können Ihren Selektor auch nicht auf Ihre Checkbox beschränken.

Ihre ändern = „“ „= zu nennen“ und dann versuchen, den folgenden Code-Konzept:

$('#mytable').find('input[type="checkbox"]:checked').each(function() { 
    var tr = $(this).closest('tr'), 
     filename = tr.find('[name="filename"]').val(); 

    // [...] 
}); 

Answer 3

Sobald Sie das Kontrollkästchen (innerhalb der Schleife) erhalten, dann müssen Sie dafür die Reihe bekommen Checkbox, zB:

$("#thechecked").click(function(){ 
    var send_list = [] 
    $('#mytable :checkbox:checked').each(function() { 
     var row = $(this).closest("tr"); 

     var value = row.find("#presetChoosen").val(); 
     var filename = row.find("#filename").text(); 

     var dict = {}; 
     dict['filename'] = filename 
     dict['value'] = value 
     send_list.push(dict) 
    }); 
    console.log(send_list) 
}); 

bisschen schwer zu 100% ohne Ihre HTML (in der Frage), und es sieht aus wie Sie Elemente mit der gleichen id haben, zB id='presetChoosen' auf jeder Zeile, die gegen geraten.

Answer 4

Wie die angenommene Antwort sagte ids should be unique. Was ich tun würde ist filename und presetChoosen zu Klassen statt, da sie eine Art von Sache sind (class), keine besondere Sache (id). So können Sie das DOM in einem besser lesbaren und leichter zu verstehen Weg durchqueren könnten:

$("#thechecked").click(function(){ 
 
    var send_list = []; 
 
    $('#mytable').find(':checkbox:checked').each(function (index, checkbox) { 
 

 
     // Find the row this checkbox is in 
 
     var row = $(checkbox).closest('tr'), 
 
     value = row.find('.presetChoosen').val(), 
 
     filename = row.find('.filename').text(); 
 

 
     send_list.push({ 
 
     filename: filename, 
 
     value: value 
 
     }); 
 

 
    }); 
 
    console.log(send_list); 
 

 
});

tr,td{border:1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mytable"> 
 
    <thead> 
 
    <tr id="mq"> 
 
     <td></td> 
 
     <td>What</td> 
 
     <td>Meta</td> 
 
     <td>Preset</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr id="1"> 
 
     <td><input type="checkbox" /></td> 
 
     <td class="filename" >Underthesea</td> 
 
     <td>1920x1080</td> 
 
     <td> <select class="presetChoosen"> 
 
       <option value="Watch">Watch</option> 
 
       <option value="Delete">Delete</option> 
 
       <option value="None">None</option> 
 
       <option value="Other">Other</option> 
 
     </select></td> 
 
     </tr> 
 
     <tr id="2"> 
 
     <td><input type="checkbox" /></td> 
 
     <td class="filename" >Overthehill</td> 
 
     <td>1280x720</td> 
 
     <td> <select class="presetChoosen"> 
 
       <option value="Watch">Watch</option> 
 
       <option value="Delete">Delete</option> 
 
       <option value="None">None</option> 
 
       <option value="Other">Other</option> 
 
     </select></td> 
 
     </tr> 
 
     <tr id="3"> 
 
     <td><input type="checkbox" /></td> 
 
     <td class="filename" >Mocking</td> 
 
     <td>1280x720</td> 
 
     <td> <select class="presetChoosen"> 
 
       <option value="Watch">Watch</option> 
 
       <option value="Delete">Delete</option> 
 
       <option value="None">None</option> 
 
       <option value="Other">Other</option> 
 
     </select></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<button id="thechecked">Get Checked</button>