Fatal编程技术网
  • javascript/
  • Javascript 引导模式中的选中复选框值更改父窗口中的复选框值

Javascript 引导模式中的选中复选框值更改父窗口中的复选框值

javascript jquery twitter-bootstrap

Javascript 引导模式中的选中复选框值更改父窗口中的复选框值,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,模态中的复选框选择父窗口中的复选框值 当引导模式具有带有复选框值的窗体时，如果在模式中选择了值，则需要在父窗口上选择相同的复选框窗体值 理想的解决方案是让用户在模式中进行选择，例如选择2-3-4项，关闭模式时，父窗口将使用所选复选框进行更新，对此提供的任何帮助都将不胜感激 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstra

模态中的复选框选择父窗口中的复选框值

当引导模式具有带有复选框值的窗体时，如果在模式中选择了值，则需要在父窗口上选择相同的复选框窗体值

理想的解决方案是让用户在模式中进行选择，例如选择2-3-4项，关闭模式时，父窗口将使用所选复选框进行更新，对此提供的任何帮助都将不胜感激

<!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>


模态示例
选择您喜爱的运动：
足球
棒球
板球
拳击
赛马
游泳



开放模态
&时代；
模态头
选择您喜爱的运动：
足球
棒球
板球
拳击
赛马
游泳


接近
请使用此

$（文档）.ready（函数（）{
$（'.modal_复选框'）。更改（函数（）{
var test=$（this.val（）；
$（'input[value^='+test+']'）。prop（'checked'，true）；
});
});


模态示例
选择您喜爱的运动：
足球
棒球
板球
拳击
赛马
游泳



开放模态
&时代；
模态头
选择您喜爱的运动：
足球
棒球
板球
拳击
赛马
游泳


接近

请将您用于在中实现需求的当前脚本包括在内，以演示您当前遇到的问题。一般来说，如果您需要多个UI组件来反映相同的数据，您将使用共享数据存储，从简单变量到cookie、存储在数据属性或本地存储中的对象等。。有很多方法可以做到这一点，但是您需要尝试实现一种方法，并且只有在您选择的方法有问题时才可以在这里发布代码。