检查表td中是否选中了复选框

时间:2017-03-08 10:29:10

标签: jquery html checkbox html-table

我正在尝试构建一个脚本,用于检查是否使用jQuery $each函数检查了复选框。下面是HTML代码:

 <tr>
  <td class="categories">World</td>
  <td class="category_enabled" style="float: right;">
  <input type="checkbox"/>
  </td>
 </tr>

 <tr>
  <td class="categories">Economy</td>
  <td class="category_enabled" style="float: right;">
  <input type="checkbox"/>
  </td>                            
 </tr>

 <tr>
   <td class="categories">Ψυχαγωγία</td>
   <td class="category_enabled" style="float: right;">
   <input type="checkbox"/>
   </td>
 </tr>

我相信它就像(内部.each()):

if ($("find_specific_checkbox").is(":checked")){
   console.log("Checked!");
}

我有什么想法可以做到这一点。  我正在尝试几个小时,但还没有。

2 个答案:

答案 0 :(得分:5)

您必须遍历该列中的每个复选框,然后检查是否已选中该复选框。

&#13;
&#13;
$(document).ready(function() {
  $('table [type="checkbox"]').each(function(i, chk) {
    if (chk.checked) {
      console.log("Checked!", i, chk);
    }
  });

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table>
  <tr>
    <td class="categories">World</td>
    <td class="category_enabled" style="float: right;">
      <input type="checkbox" />
    </td>
  </tr>

  <tr>
    <td class="categories">Economy</td>
    <td class="category_enabled" style="float: right;">
      <input type="checkbox" checked />
    </td>
  </tr>

  <tr>
    <td class="categories">Ψυχαγωγία</td>
    <td class="category_enabled" style="float: right;">
      <input type="checkbox" />
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

根据您的问题和标记,我相信您打算遍历每个表行元素,并获取每行中复选框的状态。

如果是这种情况,我创建了(1)代码示例和(2)下面的概念验证示例,它可以执行您想要执行的操作。

代码示例

$('table tr').each(function(i) {
    // Cache checkbox selector
    var $chkbox = $(this).find('input[type="checkbox"]');

    // Only check rows that contain a checkbox
    if($chkbox.length) {
    var status = $chkbox.prop('checked');
        console.log('Table row '+i+' contains a checkbox with a checked status of: '+status);
    }
});

工作示例

我已将第一个复选框设置为checked状态,因此您可以看到逻辑的工作原理。

$(function() {
  // General/modular function for status logging
  var checkboxChecker = function() {
    $('table tr').each(function(i) {
      // Only check rows that contain a checkbox
      var $chkbox = $(this).find('input[type="checkbox"]');
      if ($chkbox.length) {
        var status = $chkbox.prop('checked');
        console.log('Table row ' + i + ' contains a checkbox with a checked status of: ' + status);
      }
    });
  };
  
  // Check checkboxes status on DOMready
  checkboxChecker();
  
  // Check again when checkboxes states are changed
  $('table tr input[type="checkbox"]').on('change', function() {
    checkboxChecker();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="categories">World</td>
    <td class="category_enabled" style="float: right;">
      <input type="checkbox" checked />
    </td>
  </tr>

  <tr>
    <td class="categories">Economy</td>
    <td class="category_enabled" style="float: right;">
      <input type="checkbox" />
    </td>
  </tr>

  <tr>
    <td class="categories">Ψυχαγωγία</td>
    <td class="category_enabled" style="float: right;">
      <input type="checkbox" />
    </td>
  </tr>
</table>