Передача значений из checkbox в функцию

156

31 октября 2018, 21:30

уважаемые коллеги. Я только недавно начал осваивать js и jquery, и в процессе написания одного скрипта для расчётчика возникла проблема. Есть html таблица с checkbox, при нажатии на которые, их value динамически передаются в массив. Далее с элементами массива происходит математика и результаты записываются в нужные ячейки таблицы html. Также, необходимо что бы при нажатии на чекбокс передовались атрибуты id и name, т.к по моей задумке в них необходимо внести название, которое также будет выводиться в соответсвующую ячейку таблицы и один операнд для расчёта, результат которого также выводиться. Вопрос в том, если механики позволяющие подобные операции, как передача других атрибутов кроме value, и если нет то может идею подкинете как бы это реализовать. Я пыталься сделать это по аналогии с value и записью в массив, но на выходе получалось что, в массив записывается только одно и тоже name. Сейчас вот в таком виде представлено (и конечно не работает).

   var checks = $("input:checkbox");
   $("input:checkbox").on("change", function() {
   var nameArr = new Array();
   for (var i=0;i<boxes.length;i++) {
   var checkboxies = checks[i];
   if ($(checkboxies).prop('checked')) {
   nameArr[nameArr.length] = $(checkboxies).attr('name');
     }
 }
 showSysName(nameArr);
 });
 var showSysName = function(array) {
 var NameOne = " ";
 var NameTwo = " ";
 var NameThree = " ";
 var NameFour = " ";
 for (var i = 0; i < array.length; i++) {
 NameOne = nameArr.slice(0,1);
 NameTwo = nameArr.slice(1,2);
 NameThree = nameArr.slice(2,3);
 NameFour = nameArr.slice(3,4);
 }
$(".nameOne").html(NameOne);
$(".nameTwo").html(NameTwo);
$(".nameThree").html(NameThree);
$(".nameFour").html(NameFour);

}

Answer 1

Одно и то же значение у вас из-за строчки:

nameArr[nameArr.length] = $(checkboxies).attr('name');

Используйте для добавления в массив:

nameArr.push(element);

$(document).ready(function(){ 
   
  var arr = []; 
  $('input[type=checkbox]').on('change', function(){ 
    if ($(this).is(':checked')) {  
      arr.push($(this).attr('name')); 
    } else { 
      let idx = arr.indexOf($(this).attr('name')); 
      arr.splice(idx, 1); 
    } 
     
    console.log(arr.join(', ')); 
  }); 
   
   
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<input type='checkbox' id='chk1' name='chk_name1' value='1' />1 
<input type='checkbox' id='chk2' name='chk_name2' value='2' />2 
<input type='checkbox' id='chk3' name='chk_name3' value='3' />3

Вообще вариантов для передачи много:

$(document).ready(function(){ 
   
  $('input[type=checkbox]').on('change', function(){ 
    console.log($(this).attr('id')); 
    console.log($(this).attr('name')); 
    console.log($(this).val()); 
  }); 
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<input type='checkbox' id='chk1' name='chk_name1' value='1' />1 
<input type='checkbox' id='chk2' name='chk_name2' value='2' />2 
<input type='checkbox' id='chk3' name='chk_name3' value='3' />3