如何使用javascript制作带复选框的弹出窗口?

时间:2017-10-24 15:32:32

标签: javascript html5 checkbox popupwindow

我正在尝试创建一个按钮,在单击时打开一个弹出窗口。它工作正常,但我想添加一个有三个复选框的弹出窗口。这是学校的作业,所以我不能使用除HTML5,CSS和JavaScript之外的任何其他语言。这可能吗?这是HTML代码:

<script language="JavaScript" src="prijsvraag.js"></script>
<input type="button" onclick="prijsvraagknop()" value="Prijsvraag"></button>

这是js代码

function prijsvraagknop(){
var naam = window.prompt("Jouw naam:")
var jouw_antwoord = window.prompt("Jouw reactie:")

if (document.getElementById('B').checked) {
    alert("Hoera " + NaamVar + "! Je hebt het antwoord goed. Er doen nog meer kinderen mee. Je kunt daarom over een maand op deze pagina lezen of je de hoofdprijs gewonnen hebt.");
    }
else {
    alert("Helaas " + NaamVar + ". Je hebt het antwoord fout. Je maakt geen kans op de hoofdprijs.");
    }   

2 个答案:

答案 0 :(得分:0)

您使用机制打开弹出窗口。可以使用相同的机制在包含复选框的div上设置可见性标志。

在哪里 - 因为你的onClick会导致你的提醒或确认电话,呈现你的弹出窗口。你的onClick会在div上设置一个可见性标志,带有复选框。

答案 1 :(得分:0)

这里是一个示例。html代码由如下所示的复选框组成。

<input type="button" id="popupbutton" onclick="popup(this)"/>
    <ul id="checkBundle">
        <li><label><input type="checkbox" />test1</label>
        <li><label><input type="checkbox" />test2</label>
        <li><label><input type="checkbox" />test3</label>
        <li><label><input type="checkbox" />test4</label>
     </ul>

javascript在下面

  function popup() {
       var popwindow = document.getElementById("checkBundle");
       if (popwindow.style.display === "none") {
           popwindow.style.display = "block";
      } else {
            popwindow.style.display = "none";
        }
   };