Question

我有一个像这样的html结构：

<tr>
    <td>NC</td>
    <td><%= @subscriptions.where("users.ranking = 'NC'").count %></td>
    <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" id="bite" data-size='small'></td>
</tr>
<tr>
    <td>40</td>
    <td><%= @subscriptions.where("users.ranking = '40'").count %></td>
    <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small' ></td>
</tr>
<tr>
    <td>30/5</td>
    <td><%= @subscriptions.where("users.ranking = '30/5'").count %></td>
    <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small' ></td>
</tr>

我需要编写一个脚本，每次选中一个复选框时，都会获取每个<td></td>的第一个<tr></tr>的innerhtml，其中复选框被选中并将其作为数组返回。

这是我想出的：

$(document).ready(function(){
    $('.checkbox-ranking').on('change', function() {
        var rankings = $('.checkbox-ranking:checked').map(function() {
            return $(this).parent().parent().parent().parent().children().first().html();
        }).get().join(',');
        alert(rankings);
    });
});

我必须补充说我安装了gem bootstrap-switch以具有ON / OFF开关按钮，这就是我的复选框。我注意到我打开了我的按钮，它没有传递给html代码中的checked，所以我想这就是为什么我的代码无法工作：脚本实际上没有检测到on change事件。

还有其他想法吗？

Answer 1

好的，现在可行了

$(document).ready(function(){
    $('.checkbox-ranking').on('change', function() {
        var rankings = $('.checkbox-ranking:checked').map(function() {
            return $(this).parent().parent().find('td:first-child').html();
        }).get().join(',');
        alert(rankings);  
    });
});

和jsfiddle：https://jsfiddle.net/btrauybx/2/

Answer 2

尝试使用closest()和first()：

＆＃13;

$(function() {
  $('input.checkbox-ranking').on('change', function(e) {
    var ranks = $('input.checkbox-ranking:checked').map(function() {
      return $(this).closest('tr').children().first().text();
    }).get();
    alert(ranks.join(','));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>NC</td>
    <td>
      <%=@ subscriptions.where( "users.ranking = 'NC'").count %>
    </td>
    <td>
      <input type="checkbox" name="my-checkbox" class="checkbox-ranking" id="bite" data-size='small'>
    </td>
  </tr>
  <tr>
    <td>40</td>
    <td>
      <%=@ subscriptions.where( "users.ranking = '40'").count %>
    </td>
    <td>
      <input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small'>
    </td>
  </tr>
  <tr>
    <td>30/5</td>
    <td>
      <%=@ subscriptions.where( "users.ranking = '30/5'").count %>
    </td>
    <td>
      <input type="checkbox" name="my-checkbox" class="checkbox-ranking" data-size='small'>
    </td>
  </tr>
</table>

＆＃13;

您也可以使用eq(0)代替first()。

尝试使用jquery获取元素并将它们存储在数组中

2 个答案: