javascript - 选中复选框时从行获取值

Question

我有一个带有这样的复选框的表格:

复选框 ID 大小名称

复选框1 50*50 aaa

复选框2 20*20 bbb

目前我可以计算有多少个复选框被选中:

$(document).ready(function(){

            var $checkboxes = $('#addA td input[type="checkbox"]');


            $checkboxes.change(function(){
                var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
                $('#count-checked-checkboxes').text(countCheckedCheckboxes);
                console.log(countCheckedCheckboxes);

            });

        });

我的问题是，当我选择第一个复选框时，如何获取列大小的值？另外，例如如何增加值，假设我选择了前面示例中的所有复选框，我想要类似的内容:

var $50.50 = 1
var $20.20 = 1

谢谢

编辑:表格 HTML:

    <table id="add-a" class="ad dataTable no-footer" style="width: 1500px;" role="grid">
<thead>
  <tr role="row">
<th align="" class="sorting_asc" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Add?: activate to sort column descending" style="width: 59px;">Add?</th>
<th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="ID: activate to sort column ascending" style="width: 94px;"> ID</th>
<th align="" class="center sorting" tabindex="0" aria-controls="add-a" rowspan="1" colspan="1" aria-label="Size: activate to sort column ascending" style="width: 247px;">Size</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_7a53936d" name="checkbox[]" value="300x250_zzzzz" class="r1"></p></b></td>
    <td align="left" class="center">1</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even" style="background: navajowhite;">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_fd6cb3e4" name="checkbox[]" value="300x250_aaaa" class="r1"></p></b></td>
    <td align="left" class="center">2</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_503dd438" name="checkbox[]" value="300x250_bbbb" class="r1"></p></b></td>
    <td align="left" class="center">3</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_d68b36ad" name="checkbox[]" value="300x250_cccc" class="r1"></p></b></td>
    <td align="left" class="center">4</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_dd7ff4ea" name="checkbox[]" value="300x250_dddd" class="r1"></p></b></td>
    <td align="left" class="center">5</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="even">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_456f96f3" name="checkbox[]" value="300x250_eeee" class="r1"></p></b></td>
    <td align="left" class="center">6</td>
    <td align="left" class="center">300x250</td>
  </tr><tr role="row" class="odd">
    <td align="left" class="sorting_1"><b><p style="text-align: center;"><input type="checkbox" id="check_09c16d50" name="checkbox[]" value="300x250_ffff" class="r1"></p></b></td>
    <td align="left" class="center">7</td>
    <td align="left" class="center">300x250</td>
  </tr></tbody>
<tbody>
</tbody>
</table>

Answer 1

请尝试一下

$checkboxes.change(function(){
    var size= $(this).attr('value').split('_')[0];
});

split()方法用于将字符串拆分为子字符串数组，并返回新数组。

提示:如果使用空字符串 ("") 作为分隔符，则字符串将在每个字符之间拆分。

注意: split() 方法不会更改原始字符串。