Question

我正在尝试根据相应的按钮点击将复选框值放入div模式中。我无法实现它。

所需结果：相应的按钮应传递相应模态div中的复选框值并显示它们。

提前致谢。

<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <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">
         This are the Games that I usually play, and i'm really go at it:<br>
        <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>

<div id="myModal2" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <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">
        This are the Games that I don't usually play, but would love to:<br>
        <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>

<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>
  <button type="button">Get Values</button>
</form>
<button  id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
  <button  id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>

definitions

Answer 1

首先，您必须重写您的选择器：$('#button1')而不是$('button1')并移动代码段

var favorite = [];
$.each($("input[name='sport']:checked"), function() {
  favorite.push($(this).val());
});

并将其放在您的点击功能中，否则您最喜欢的数组只会在页面加载完成时加载一次。

Answer 2

实际上你在很多地方错过了一些SQUARE(y++)字符。试试这个：

在HTML中，更改

$(document).ready(function(){
    $("#button1").click(function() {
        var p=$("#myModal1 #checkid");
        $(p).html("I play these games ");
        $.each($("input[name='sport']:checked"), function() {
            $(p).html($(p).html() + '<br>' + $(this).val());
        });      
    }); 
    $("#button2").click(function() {
        var p=$("#myModal2 #checkid");
        $(p).html("I don't play these games ");
        $.each($("input[name='sport']:checked"), function() {
            $(p).html($(p).html() + '<br>' + $(this).val());
        }); 
    });
});

到

<button  id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>

将复选框值传递给bootstrap模态并根据id调用div模态

2 个答案: