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（）方法用于将字符串拆分为子字符串数组，并返回新数组。

提示：如果使用空字符串（＆＃34;＆＃34;）作为分隔符，则在每个字符之间拆分字符串。

注意： split（）方法不会更改原始字符串。

Answer 2

您使用attr()获得了属性值，您可以使用val()函数获取或设置表单元素的值。

   $(document).ready(function(){

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

        $checkboxes.change(function(){
        var size= $(this).attr('size');  // get size value
        var val = $(this).val(); //  get value
        $(this).val(val++);  // set value increment by 1 

        });

    });

Answer 3

我只需在您的复选框中添加class =“复选框”，现在我选中每个选中的复选框并提醒此复选框的val（）....我希望它能帮助您

$(".checkbox").click(function(){
  $.each($('input[type="checkbox"]:checked'), function() { 
      alert($(this).val());
  }); 
});

    <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" class="checkbox" 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" class="checkbox" 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" class="checkbox" 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" class="checkbox" 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" class="checkbox" 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" class="checkbox" 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" class="checkbox" 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>

Answer 4

here is my jquerycode:

＆＃13;

$(document).ready(function() {
  $(".checkbox").click(function(){
    $.each($('input[type="checkbox"]:checked'), function() {
      alert($(this).val());
    });
  });
  $('#add-a').DataTable( {
    "pagingType": "full_numbers"
  });
});

＆＃13;

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

4 个答案: