从复选框显示多个数据

时间：2018-06-04 11:41:22

标签： javascript jquery html checkbox

如何从复选框到另一个模态获取多个数据？如果我单击一个按钮，会出现带有一些数据的引导模式。数据有复选框。我想在表格中的另一个模态上打印所选数据。我正在尝试推送该值，但它只是打印复选框值，我想打印name和connected to。

我的代码

$(document).ready(function() {
        $("#checkBtn2").click(function() {
            var favorite = [];
            $.each($("input[name='case']:checked"), function() {
                favorite.push($(this).val());
            });
            $('#myModal2').modal('show').on('shown.bs.modal', function() {
                $("#checkid").html(favorite.join(", "));
            });
        });
    });
 <script src="https://code.jquery.com/jquery.min.js"></script>

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        
        <div class="container">
  <div class="row">
    <div class="col-sm-6">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Connect to</th>
            <th>View</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data1"</td>
          </tr>
          <tr>
            
            <td>Data2</td>
            <td>Data3</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data2"</td>
          </tr>
          <tr>
            
            <td>Data3</td>
            <td></td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data3"</td>
          </tr>
          <tr>
            
            <td>Data4</td>
            <td>Data5</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data4"</td>
          </tr>
          <tr>
            
            <td>Data5</td>
            <td>Data6</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data5"</td>
          </tr>
          <tr>
            
            <td>Data6</td>
            <td></td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data6"</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <input type='button' name='case' id='checkBtn2' value='View' class='btn btn-info'>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
          <p id="checkid"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

您可以获得距离tr最近的checkbox checked，并将其作为json object提供给favorite变量。然后，您可以使用for-loop在模态中检索它。这将使它更有条理。

＆＃13;
＆＃13; 
$(document).ready(function() {
        $("#checkBtn2").click(function() {
            var favorite = [];
            $.each($("input[name='case']:checked"), function() {
                var tr = $(this).closest('tr');
                var data1 = $(tr).find('td').eq(0).text();
                var data2 = $(tr).find('td').eq(1).text();
                var data = {data1: data1, data2: data2};
                favorite.push(data);
            });
            $('#myModal2').modal('show').on('shown.bs.modal', function() {
                $("#checkid").html("");
                for(var i=0;i < favorite.length; i++){
                  $("#checkid").append('<div>'+favorite[i].data1 +',' + favorite[i].data2 +'</div>');
                }
            });
        });
    });
＆＃13; 
<script src="https://code.jquery.com/jquery.min.js"></script>

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        
        <div class="container">
  <div class="row">
    <div class="col-sm-6">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Connect to</th>
            <th>View</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data1"</td>
          </tr>
          <tr>
            
            <td>Data2</td>
            <td>Data3</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data2"</td>
          </tr>
          <tr>
            
            <td>Data3</td>
            <td></td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data3"</td>
          </tr>
          <tr>
            
            <td>Data4</td>
            <td>Data5</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data4"</td>
          </tr>
          <tr>
            
            <td>Data5</td>
            <td>Data6</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data5"</td>
          </tr>
          <tr>
            
            <td>Data6</td>
            <td></td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data6"</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <input type='button' name='case' id='checkBtn2' value='View' class='btn btn-info'>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
          <p id="checkid"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("#checkBtn2").click(function() {
    var favorite = [];
    $.each($("input[name='case']:checked"), function() {
      var elem = $(this);
      var parent = elem.parents("tr:first");
      var name = parent.find("td:first").text();
      var connectedTo = parent.find("td:eq(1)").text();
      favorite.push(name + ":" + connectedTo);
    });
    $('#myModal2').modal('show').on('shown.bs.modal', function() {
      $("#checkid").html(favorite.join(", "));
    });
  });
});
＆＃13; 
<script src="https://code.jquery.com/jquery.min.js"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Connect to</th>
            <th>View</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data1" </td>
          </tr>
          <tr>

            <td>Data2</td>
            <td>Data3</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data2" </td>
          </tr>
          <tr>

            <td>Data3</td>
            <td></td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data3" </td>
          </tr>
          <tr>

            <td>Data4</td>
            <td>Data5</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data4" </td>
          </tr>
          <tr>

            <td>Data5</td>
            <td>Data6</td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data5" </td>
          </tr>
          <tr>

            <td>Data6</td>
            <td></td>
            <td align="center"><input name="case" class="checkboxes" type="checkbox" value="data6" </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <input type='button' name='case' id='checkBtn2' value='View' class='btn btn-info'>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <p id="checkid"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

您的代码的问题是输入没有＆＃34; connectedTo＆＃34; html中的数据。要么从td元素中获取它，要么修改html，以便可以将相同的数据存储在输入的数据属性中。

相关问题
最新问题