Question

我有以下情况，我有一个表有行，每行有一个复选框和其他值，如果我点击复选框，整行应该使用jQuery添加到＃selected-rows div

commands:
  create_post_dir:
    command: "mkdir -p /opt/elasticbeanstalk/hooks/appdeploy/post"
    ignoreErrors: true
files:
  "/opt/elasticbeanstalk/hooks/appdeploy/post/99_adjust_request_limit.sh":
    mode: "000755"
    owner: root
    group: root
    content: |
      #!/usr/bin/env bash
      sed -i.back '/<VirtualHost/aLimitRequestLine 100000' /etc/httpd/conf.d/wsgi.conf
      supervisorctl -c /opt/python/etc/supervisord.conf restart httpd

selected-rows div应包含检查其输入框的表行中的所有文本

如果选中了test1复选框，那么＃selected-rows将包含

<table>
    <tr>
        <td>
            <input type="checkbox" name="test1" value=""></td>
        <td>
            Other Test1 value1
        </td>
        <td>
            Other Test1 value2
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="test2" value="">
        </td>
        <td>
            Other Test2 value1
        </td>
        <td>
            Other Test2 value2
        </td>
    </tr>
</table>
<div id="seleted-rows">

</div>

如果同时选中了两个复选框，则＃selected-rows将为

 Other Test1 value1     Other Test1 value2

Answer 1

尝试这样的事情：

$('input[type="checkbox"]').on('change',function(){
  if($(this).is(':checked')) {
  var elements = $(this).parent('td').nextAll('td');
      elements.attr('select', $(this).attr('name'));
      clone =elements.clone();

  $('#seleted-rows').append(clone);
  } else
  {
      $('#seleted-rows').find('td[select="'+$(this).attr('name')+'"]').remove();
  }
});

的jsfiddle：http://jsfiddle.net/5ryy9krn/2/

Answer 2

试试这个：

$(":checkbox").on("click", function(){
    if($(this).is(":checked")) {
        $(this).closest("td").siblings("td").each(function(){
          $("#seleted-rows").append($(this).text());
        });
    }
    else {
     $("#seleted-rows").html("");
     $(":checkbox:checked").closest("td").siblings("td").each(function(){
       $("#seleted-rows").append($(this).text());
     });
    }
})

<强> FIDDLE

Answer 3

基本上，实现此目的的最简单方法是使用onclick事件。

在此处查看文档：{{3}}

我冒昧地给你的表一个id来引用和使用jQuery来简化JavaScript。目前还不清楚你想要在你选择的行div中插入什么。但是我相信你正在寻找兄弟姐妹，这看起来像这样：

$('#my-table input[type="checkbox"]').click(function (){
    if ($(this).is(':checked')) {
         // Add the element to the div with an id identifier
         $('#selected-rows').append('<div id="[unique-id-from-input]"></div>');
         $(this).closest('td').siblings('td').each(function () {
             $('#selected-rows #[unique-id-from-input]').append($(this).clone());
         });
    } else {
         // Remove the element from the div targeted by the id identifier
         $('#selected-rows #[unique-id-from-input]').remove();
    }
});

删除过程会更加简单，因为您只需在取消选中输入时删除div。

此主题存在许多变体，您需要对其进行自定义以满足您的确切需求，但这应该是一个很好的跳板。

将选中的复选框附加到div

3 个答案: