如何从JavaScript中的表格中提取复选框值？

Question

我有一个表，该表的每列中都有复选框，并且我想获取选中复选框的'name'属性。下面是复选框的外观。每个复选框都有与行和列关联的name不同。 name属性的语法为[row_name-col_name]：

我在JS文件中尝试了以下操作：

var formid = jQuery(elem).attr('id');
var checkdvalue = [];
var j = 0;

jQuery('#ecf_table').find('tr').each(function() {
  var row = jQuery(this);
  if (row.find('input[type="checkbox"]').is(':checked')) {
    checkdvalue[j++] = jQuery(row.find('input[type="checkbox"]')).attr('name');
  }
  alert(checkdvalue);
});

我需要一个看起来像上表的A.4-2,A.4-3,A.6-2的数组。但是我只得到A.4-1,A.6-1。请帮助我获得期望的价值。

Answer 1

您不必遍历整个表格，只需选中页面上所有选中的复选框即可。如果希望将其限制在该表中，请使用选择器#ecf_table input[type="checkbox"]:checked。

function calculate() {
  var arr = [];
  $('input[type="checkbox"]:checked').each(function () {
      arr.push($(this).attr('name'));
  });

  console.log(arr);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="A.1">
<input type="checkbox" name="A.2">
<input type="checkbox" name="A.3">
<input type="checkbox" name="B.1">
<input type="checkbox" name="B.2">
<input type="checkbox" name="B.3">

<button onclick="calculate()">Click me</button>

Answer 2

您的代码存在的问题是您的选择器会找到复选框的集合。然后，您在该集合上调用attr()，但是该方法只会查看找到的第一个元素，而不是所有元素。

要使逻辑起作用，您可以选择所有复选框，然后使用map()从中构建阵列。使用该方法，您的所有代码都可以简化为：

var checkedvalue = $('#ecf_table :checkbox:checked').map(function() {
  return this.name;
});

Answer 3

我对您的代码做了一些小的编辑。 这应该工作正常。

function TestMethod()
        {
            var checkdvalue = [];
            var j = 0;
            jQuery('#ecf_table').find('tr').each(function () {
                var row = jQuery(this);
                row.find('input[type="checkbox"]').each(function () {
                    var checkbox = jQuery(this);
                    if(checkbox.prop("checked") == true)
                    {
                        checkdvalue[j++] = checkbox.attr("id");
                    }
                });
            });

            alert(checkdvalue);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" runat="server">
    <div>
    <table id="ecf_table">
        <tr>
            <td colspan="6">Advanced Scrum Product Owner</td>
        </tr>
        <tr>
            <td>e-Competence Level</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>A.4</td>
            <td><input type="checkbox" id="A.4-1"/></td>
            <td><input type="checkbox" id="A.4-2"/></td>
            <td><input type="checkbox" id="A.4-3"/></td>
            <td><input type="checkbox" id="A.4-4"/></td>
            <td><input type="checkbox" id="A.4-5"/></td>
        </tr>
        <tr>
            <td>A.6</td>
            <td><input type="checkbox" id="A.6-1"/></td>
            <td><input type="checkbox" id="A.6-2"/></td>
            <td><input type="checkbox" id="A.6-3"/></td>
            <td><input type="checkbox" id="A.6-4"/></td>
            <td><input type="checkbox" id="A.6-5"/></td>
        </tr>
        <tr>
            <td>B.1</td>
            <td><input type="checkbox" id="B.1-1"/></td>
            <td><input type="checkbox" id="B.1-2"/></td>
            <td><input type="checkbox" id="B.1-3"/></td>
            <td><input type="checkbox" id="B.1-4"/></td>
            <td><input type="checkbox" id="B.1-5"/></td>
        </tr>
        <tr>
            <td>B.3</td>
            <td><input type="checkbox" id="B.3-1"/></td>
            <td><input type="checkbox" id="B.3-2"/></td>
            <td><input type="checkbox" id="B.3-3"/></td>
            <td><input type="checkbox" id="B.3-4"/></td>
            <td><input type="checkbox" id="B.3-5"/></td>
        </tr>
    </table>
        <input type="button" onclick="TestMethod()" value="submit" />
    </div>
    </form>