Question

我有2个表，每行表都有一个复选框

<table class="One">
 <thead>
     <tr>
     <th>choose</th>
     <th>Code 1</th>
     </tr>
 </thead>
<tbody>
<tr>
  <th scope="row"><input type="checkbox" class="form-check-input"></th>
  <td>123</td>
</tr>

 <table class="Two">
 <thead>
     <tr>
     <th>choose</th>
     <th>Code 2</th>
     </tr>
 </thead>
<tbody>
<tr>
  <th scope="row"><input type="checkbox" class="form-check-input"></th>
  <td>456789</td>
</tr>

在模态中有一个表单

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
     Continue
    </button>

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

       <form action="" method="post">
         /* inputs here */
          <button type="submit" class="btn btn-primary">Submit</button>
       </form>

      </div>
    </div>
  </div>
</div>

我想从每个表中捕获一个复选框，并在单击“继续”按钮模式时转换为模态中的输入。我如何用jquery做到这一点？

修改

https://jsfiddle.net/43zy6mt9/

我可以将值传递给变量jquery。如何获取此值并使用它创建模态输入？

Answer 1

＆＃13;

$(document).on('click', '#btn_Continue', function() {
  var inpId = 0;
  $('#dvInputs').html('');
  $('table.One input[type=checkbox]:checked').each(function() {
    var chkValue = $(this).closest('th').next('td').text();
    $('#dvInputs').append($('<input type="text" id="' + ("input" + inpId) + '" value="' + chkValue + '" />'));
    inpId++;
  });
  $('table.Two input[type=checkbox]:checked').each(function() {
    var chkValue = $(this).closest('th').next('td').text();
    $('#dvInputs').append($('<input type="text" id="' + ("input" + inpId) + '" value="' + chkValue + '" />'));
    inpId++;
  });
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="One">
  <thead>
    <tr>
      <th>choose</th>
      <th>Code 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><input type="checkbox" class="form-check-input"></th>
      <td>123 A</td>
    </tr>
    <tr>
      <th scope="row"><input type="checkbox" class="form-check-input"></th>
      <td>123 B</td>
    </tr>
  </tbody>
</table>
<table class="Two">
  <thead>
    <tr>
      <th>choose</th>
      <th>Code 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><input type="checkbox" name="chkTwo" class="form-check-input"></th>
      <td>456789 A</td>
    </tr>
    <tr>
      <th scope="row"><input type="checkbox" name="chkTwo" class="form-check-input"></th>
      <td>456789 B</td>
    </tr>
  </tbody>
</table>
<button id="btn_Continue" type="button" class="btn btn-primary" data-toggle="modal" data-target="#formModal">
     Continue
    </button>
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <form action="" method="post">
          <div id="dvInputs"></div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

      </div>
    </div>
  </div>
</div>

＆＃13;

如何创建新元素并将其附加到div

$('#div-id').append($('<input type="text" id="your-id" value="your-value" />'));

Answer 2

https://jsfiddle.net/43zy6mt9/1/

查看另一个版本，它将循环包含选中复选框的所有表，这只是一个示例，selector可以更具体

$(function() {
$('.btn-primary').on('click', function(){
    $('form').find('p').empty();
    $('table').each(function(){
    var $this = $(this);
    var $checkBox = $this.find('input[type="checkbox"]');
    if ($checkBox.prop('checked')){
      $('form').find('p').append($checkBox.parent().next().html());
    }
  });
})
});

Answer 3

将名称属性添加到您的复选框。

<input type="checkbox" class="form-check-input" name="first">

在你的jquery中 -

var selected = [];
var seeChecked = function() {
 $( "input:checked" ).each(function() {
    selected.push($(this).attr('name'));
});
 };
seeChecked();
$( "input[type=checkbox]" ).on( "click", seeChecked );

将类添加到模态表单 -

<form class="s" action="" method="post">

$( "#formModal" ).on('shown', function(){
    var wrapper = $(".s"); //Fields wrapper
      $(wrapper).prepend('<input type="text" id="forcode1" /><input type="text" id="forcode2" />'); //add input box
});

将表行转换为输入

3 个答案: