javascript从选中的复选框中检索输入值，并在同一网页中显示多个html文件

javascript Retrieve input value from a selected checkbox and display multiple html file in same webpage

本文关键字：网页 显示 文件 html 复选框 检索 javascript 输入      更新时间：2023-09-26

当前，当选中所有复选框时，此代码会打开4个新选项卡，但我需要在单个窗口或单个html文件或类似文件中打开所有4个页面结果（4 html）文件，有人能帮我吗？

function submit() {
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    var box4 = document.getElementById('box4');
    var urls = [];
    if (box1.checked) {
        urls.push(box1.value);
    }
    if (box2.checked) {
        urls.push(box2.value);
    }
    if (box3.checked) {
        urls.push(box3.value);
    }
    if (box4.checked) {
        urls.push(box4.value);
    }
    urls.forEach(function(url) {
        goToUrl(url);
    });
}
function goToUrl(url) {
    var win = window.open(url, '_blank');
}
<html>
    <head>
        <meta charset="UTF-8">
        <title></title> 
        <script type="text/javascript" src="no-j-boxes.js"></script>
    </head>
    <body>
        <input type="checkbox" name="box1" value="http://box1url.com" id="box1"><label>box1</label><br/>
        <input type="checkbox" name="box2" value="http://box2url.com" id="box2"><label>box2</label><br/>
        <input type="checkbox" name="box3" value="http://box3url.com" id="box3"><label>box3</label><br/>
        <input type="checkbox" name="box4" value="http://box4url.com" id="box4"><label>box4</label><br/>
        <input type="button" value="Submit" name="submitButton" onclick="submit()">
    </body>
</html>

这里是html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="no-j-boxes.js"></script>
    </head>
    <body>
        <input type="checkbox" name="box1" value="http://box1url.com" id="box1"><label>box1</label><br/>
        <input type="checkbox" name="box2" value="http://box2url.com" id="box2"><label>box2</label><br/>
        <input type="checkbox" name="box3" value="http://box3url.com" id="box3"><label>box3</label><br/>
        <input type="checkbox" name="box4" value="http://box4url.com" id="box4"><label>box4</label><br/>
        <input type="button" value="Submit" name="submitButton" onclick="submit()">
        <div id="your_div_where_you_put_all_iframes"></div>
    </body>
</html>

这是脚本

<script>
function submit() {
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    var box4 = document.getElementById('box4');
    var urls = [];
    if (box1.checked) {
        urls.push(box1.value);
    }
    if (box2.checked) {
        urls.push(box2.value);
    }
    if (box3.checked) {
        urls.push(box3.value);
    }
    if (box4.checked) {
        urls.push(box4.value);
    }
    urls.forEach(function(url) {
        goToUrl(url);
    });
}
function goToUrl(url) {
    $('<iframe src="'+url+'" frameborder="0" scrolling="no" ></iframe>').appendTo('#your_div_where_you_put_all_iframes');
}
</script>

尝试像这样附加iframe。希望它能有所帮助！

相关文章：