Как определить, какие флажки в строке отмечены, а какие нет

Question

У меня есть таблица с парой строк. Каждый ряд имеет 6 флажков. Я знаю, как подсчитать флажки для каждой строки, но не знаю, как определить, какие из них проверены, а какие нет внутри каждой строки, например:

1. строка: 1,1,1,0,0,0
2. строка: 0,0,0,0,1,1 ...

Я попробовал какой-то код, но не стоит показывать его здесь.

Answer 1

Поскольку кажется, что вы используете jQuery, вы можете сделать следующее:

   var countBoxes = function(){
      const result = [];
      var $rows = $(document).find("tr"); //demo purpose, normally you would pass this as a param 
        $rows.each(function(i, elem){
         result.push({row: i+1, amount: $(elem).find('input[type="checkbox"]:checked').length}); 
      });

      console.log(result) //=>          {row: 1, amount: 1}
                                    //  {row: 2, amount: 1}
                                    //  {row: 3, amount: 2}
                                    //  {row: 4, amount: 1}
}

Он просто проходит по всем строкам () и проверяет наличие флажков ввода типа, которые отмечены (: флажок).

Answer 2

Тем временем я сделал что-то похожее на правдоподобное решение, может быть, есть лучшие решения, есть то, что я сделал, пожалуйста, поправьте меня с лучшей идеей, спасибо:

function whichCbox() {
   var res='';
   $('#Table2 tr').not(':first').each(function(){
      var hdn = $(this).find('input[id^="Checkbox"]');
      for(var x=0;x<=5;x++){ //there is 6 checkboxes
          if(hdn[x].checked==true) {
              res+='1';
              } else{
              res+='0';
          }
      }
      console.log('State of checkboxes in row is:'+res);
      res='';
   });
return false;
}

Answer 3

Если вы хотите получить 0 и 1, вы можете легко использовать метод jQuery map () для получения состояния флажков в каждой строке.

var table = $("table tbody")  // reference the table
table.on("change", "input:checkbox", function () {  // listen for checkbox being checked
  var result = table.find("tr")  // find the table rows
    .map( function () {  // loop over to create an array of the rows
      return $(this).find("input:checkbox")  // find the checkboxes in the row
        .map(function () {    // loop over and create array of the checkbox state
          return this.checked ? "1" : "0"  // if checked it is 1, else 0
        }).get().join("")  // change the array into a string of 0 and 1's
    }).get().join("<br/>")  // combine the array lines on the page
  $("#out").html(result)  // display the  result
}).find('input:checkbox:eq(0)').change();  // trigger change on first checkox so code runs

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><input type="checkbox" checked/></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" checked/></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" checked/></td>
      <td><input type="checkbox" checked/></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" checked/></td>
    </tr>
  </tbody>
</table>
<div id="out"></div>

Answer 4

Вот как вы можете сделать это с Javascript без jQuery:

var checkboxData = [];
var trs = document.querySelectorAll("#yourtable tr");
for (var tr of trs) {
    var rowCheckboxes = tr.querySelectorAll("input[type=checkbox]");
    checkboxData.push([]);
    for (checkbox of rowCheckboxes) {
        checkboxData[checkboxData.length - 1].push(checkbox.checked ? "checked" : "unchecked");
    }
};

С jQuery вы делаете нечто подобное, но с $("#yourtable tr").each и .find().