jQueryでチェックボックスを反復する

Question

私は、チェックボックス、ドロップダウン、およびその他の付随するデータを持つテーブルを持っています。

私はチェックされた行を繰り返してデータを取得し、そのデータを辞書に追加してからマスター配列に追加したいと考えています。

チェックボックスで正しい行が見つかったようですが、私のforループが各行を正しく引っ張っていません。ここに私のjsのコードは次のとおりです。

$("#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

私が間違って何をしているのですか？

Answer 1

select要素のようにどこでも同じIDを使用しないでください。 Idの要素は一意であることを意味する。

$("#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>

：以下

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

はあなたが達成しようとしているものの作業抜粋です：

は私が特定の値をターゲットに、いくつかのjQueryのメソッド（parent(), find(), next()）を使用しました

Answer 2

あなたはid属性を再利用しています。 IDは一意であると考えられています。実際にHTMLで同じIDを再使用するのはWC3検証エラーです。

また、セレクタのスコープもチェックボックスには表示されません。

は「=名前に」「=自分のIDを変更」し、次のコードの概念を試してみてください

：

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

    // [...] 
}); 

Answer 3

あなたは（ループ内）]チェックボックスを得れば、あなたはそのための行を取得する必要がありますチェックボックス、例えば：ハード

$("#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) 
}); 

ビットは、（問題の）あなたのHTMLせずに100％にすることが、あなたはに対して助言されるすべての行、上の同じid、例えばid='presetChoosen'を持つ要素を持っているように見えます。

Answer 4

ids should be uniqueと同様です。私がやるべきことは、（）というものではなく、filenameとpresetChoosenをクラスに変更することです（つまり、タイプはclass）。あなたが理解し、より読みやすく、簡単な方法でDOMをトラバースことができたの方法：美しい

$("#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>