Получить значения из строки при проверке флажка

Question

У меня есть таблица с флажком, как это:

Флажка идентификационного имя размера

CheckBox 1 50 * 50 ааа

Флажок-20 * 20 ГЭБ

На данный момент я могу подсчитать, сколько флажков выбрано:

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

Благодарности

EDIT: Таблица 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() не изменяет исходную строку.

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

я просто добавьте = «флажок» класс для ваших флажков и теперь я выбрать все проверили флажок и оповещения 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: 

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