Question

我有一张有两排的桌子。每行有6个复选框。我知道如何为每一行计数已选中的复选框，但不知道如何确定哪些已选中，哪些不在每行内，例如：

行：1,1,1,0,0,0
行：0,0,0,0,1,1 ...

我尝试了一些代码，但不值得在这里展示。

Answer 1

这是不使用jQuery就可以使用Javascript实现的方法：

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()。

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

由于您似乎使用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}
}

它只是循环遍历所有行（），并检查类型为checkbox（：checked）的输入。

如何检测未选中行中的哪些复选框

4 个答案: