tableのチェックボックスのチェック状態を取得したい

Question

tableにcheckboxを表示しています。
全行ループしながらcheckboxのチェック状態を取得したいです。

<table class="list">
<thead>
<th>col0</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="chk" /></td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" /></td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" /></td>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>

for(var i=1; i < ($(".list tbody").children().length + 1); i++){
	if($(".list tr:eq(" + i + ") td:eq(0)").prop()=="checked"){
		temp = "1";
	} else {
		temp = "0";
	}
}

何とか指定行のチェックボックスのチェック状態を取得したいです。
上記ではうまくいきませんでした。

どうすればよいか教えてください。
よろしくお願いします。

Comments

[m.ts10806]

.listはhtml上にないようです。
.chkを直接見に行けばいいように思いますが、用途に合わないですか？

[chintao1224]

$(.chk).prop()という見方になるのでしょうか。

[ku__ra__ge]

"jquery prop"で検索をしてみてください。propメソッドは、$(.chk).prop()という書き方で利用することはできません。

Answer 1

:checkedというセレクタが便利ですよ。
https://api.jquery.com/checked-selector/

セレクタとしても使えるし、セレクトしたあとでis()することもできます。
いくつか使用例を挙げます。

$('.chk').each((i,e)=>{
    console.log(i + '番目は、チェック' +
        ($(e).is(':checked') ? 'されてます' : 'されてません'));
});

console.log('全部で' + $('.chk:checked').length + '個チェックされてます');

let flags = $('.chk').map((i,e)=>$(e).is(':checked')).toArray();
console.log(flags);

Comments

[chintao1224]

ありがとうございます。
チェックされていてもチェックされていなくても全行のチェック状態を取得したかったので以下のようにしてみましたが、どうしてもtempに"0"が入ってしまいます。

if($(".list tr:eq(" + i + ") td:eq(0)").prop('checked')){
temp = "1";
} else {
temp = "0";
}

何が良くないのか教えてもらえないでしょうか。

[gpsoft]

惜しいです。
このコードだと、td要素が選択されてしまうので、prop('checked')は常にfalseになります。
td要素の中のinput要素が選択されるようにセレクタを修正してみてください。

[chintao1224]

できました。ありがとうございました。
if($(".conditionlist tr:eq(" + i + ") td input[type='checkbox']").prop('checked') == true){