Question

模态中的

复选框选中父窗口中的复选框值

当bootstrap模式的表单带有复选框值时，如果在模态中选择了值，我需要在父窗口中选择相同的复选框表单值

想法解决方案是让用户在模态中进行选择，比如选择2-3-4个项目，关闭模态时，父窗口会使用所选复选框进行更新，对此的任何帮助都将不胜感激< / p>

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>

  <form>
    <h3>Select your favorite sports:</h3>
    <label><input type="checkbox" value="football" name="sport"> Football</label>
    <label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
    <label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
    <label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
    <label><input type="checkbox" value="racing" name="sport"> Racing</label>
    <label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
    <br><br>
 </form>

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <form>
       <h3>Select your favorite sports:</h3>
       <label><input type="checkbox" value="football" name="sport"> Football</label>
       <label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
       <label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
       <label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
       <label><input type="checkbox" value="racing" name="sport"> Racing</label>
       <label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
       <br>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

    </div>
  </div>

</div>

</body>
</html>

Answer 1

请使用此fiddle ...

$( document ).ready(function() {
  $('.modal_check_box').change(function(){
    var test = $(this).val();
    $('input[value^='+test+']').prop('checked',true);
  });
});

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>

  <form>
    <h3>Select your favorite sports:</h3>
    <label><input type="checkbox" value="football" name="sport"> Football</label>
    <label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
    <label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
    <label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
    <label><input type="checkbox" value="racing" name="sport"> Racing</label>
    <label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
    <br><br>
 </form>

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <form>
       <h3>Select your favorite sports:</h3>
       <label><input type="checkbox" class="modal_check_box" value="football" name="sport"> Football</label>
       <label><input type="checkbox" class="modal_check_box" value="baseball" name="sport"> Baseball</label>
       <label><input type="checkbox" class="modal_check_box" value="cricket" name="sport"> Cricket</label>
       <label><input type="checkbox" class="modal_check_box" value="boxing" name="sport"> Boxing</label>
       <label><input type="checkbox" class="modal_check_box" value="racing" name="sport"> Racing</label>
       <label><input type="checkbox" class="modal_check_box" value="swimming" name="sport"> Swimming</label>
       <br>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

    </div>
  </div>

</div>
</body>
</html>

我只为模态复选框添加了类modal_check_box（需要找到模态中使用的那个）。

在父窗口中的bootstrap模式更改复选框值中选中的复选框值

1 个答案: