Javascript 提交按钮后关闭模式/计算选中复选框的所有值

我是php、html5和css方面的新手。希望你能帮我解决我的问题。
我用css来设计它。这是我的密码：

<form method="post" name="testform" action="">

<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
    <input disabled type="text" name="test" placeholder="test" value="">
</a>

    <div class="modalwrapper" id="modal">   <!-- modal -->
            <div class="modalcontainer">    
                <div class="modalcol1">
                    <label>Test 1</label>
                    <input type="checkbox" name="test_modal[]" value="1">
                    <div class="clear"></div>
                    <label>Test 2</label>
                    <input type="checkbox" name="test_modal[]" value="2">
                    <div class="clear"></div>
                    <label>Test 3</label>
                    <input type="checkbox" name="test_modal[]" value="3">
                    <div class="clear"></div>
                    <label>Test 4</label>
                    <input type="checkbox" name="test_modal[]" value="4">
                    <div class="clear"></div>
                    <label>Test 5</label>
                    <input type="checkbox" name="test_modal[]" value="5">
                    <div class="clear"></div>

                    <div class="savebutton">
                        <input class="btn1" type="submit" value="Submit"/>
                    </div>
                </div>
            </div>
        <div class="overlay"></div>
    </div>      
</form>

我的问题是，当我单击submit时，它不会关闭模式。 我尝试在父窗口重定向它，但什么也没发生，它不会关闭

我还有一个关于如何计算使用PHP检查了多少复选框的问题。如果选中了1个复选框，它将显示它的值，如果选中了2个以上的复选框，它将回显一个值“more”

希望有人能帮助我。 如果我的信息不够，请让我知道，以便我可以更新它。

---

我想了解更多。提前感谢。

要打开和关闭您的模式，您必须使用JS。我建议您使用jQuery库（查看文章了解如何在JS中使用jQuery）。这样，您只需通过以下方式关闭模态：

要计算所有选中的复选框，您可以使用，即：

var l = $("input[type='checkbox']:checked").length;

---

之后，您可以使用

if-else

来设置输入字段的内容。

确保您确实遵循引导模式的正确html格式。注意数据和角色属性。请注意关闭模式的按钮如何具有这些属性

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

&时代；
情态标题
一个好身体&hellip

接近
保存更改

---

这是引导模式吗？请给我们看看js代码。PS：你为什么要在

a

里面放一个

input

？@phaberest-我不知道如何完全使用js。但是我用css设计并制作了一个模型。我还将一个输入放在锚标记内，因为当用户单击禁用的输入框时，模式将弹出.hi。我的帖子被更新了。我不知道boostrap。我只是使用了一个id来调用模态并使用css对其进行样式设置。谢谢你，先生。你只做了我说的一部分。您没有注意数据属性，即data dismission=“modal”。再次浏览html示例，并相应地复制attributes.Hi。我再次更新了我的帖子。我不知道如何使用bootstrap，我只是按照我的风格做了一个模型。你能查一下我的密码吗？我希望它在点击提交按钮后关闭。非常感谢您，很抱歉占用您的时间。请将data Dismission=“modal”添加到您的提交按钮。例如：嗨。我的头牌上要包括什么图书馆？嗨。谢谢你在这里回答。我的帖子被更新了。谢谢你，我想我现在明白你的意思了，看看我最新的答案。请反馈我是否有效。嗨。我再次更新了我的帖子。我不知道如何使用bootstrap，我只是按照我的风格做了一个模型。你能查一下我的密码吗？我想在点击提交按钮后关闭它，我想数一数有多少人被检查过。我只想先关闭我制作的模型。非常感谢你，很抱歉耽误了你的时间。没问题，这里就是这么回事。不知道你没有使用引导。使用jQuery查看我的新答案。问问这是否对你有帮助。@Mark Manalo是我给你的第二个问题的建议，对你有帮助吗？

var l = $("input[type='checkbox']:checked").length;

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->