简体   繁体   English

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

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

Currently this code opens 4 new tabs when all check box is selected, but I need all 4 page results ( 4 html ) files to open in single window or single html file or similar to it, can any one help? 当前,当选中所有复选框时,此代码将打开4个新选项卡,但是我需要所有4个页面结果(4 html)文件才能在单个窗口或单个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> 

Here is 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>

Here is script 这是脚本

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

Try appending iframes like this. 尝试像这样附加iframe。 Hope it helps ! 希望能帮助到你 !

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript-从选定的复选框中检索输入值并对其进行处理 - Javascript - Retrieve input value from a selected checkbox and do something with it 如何使用JavaScript将选定的HTML表行值显示为输入类型单选和复选框 - How to display selected HTML table row value into input type radio and checkbox using JavaScript 在 JavaScript 中获取具有相同名称的多个选中复选框的值 - Getting Value of Multiple Selected Checkbox with Same Name in JavaScript 通过使用Javascript检索显示标签中的复选框输入 - Retrieve checkbox input in display tag by using Javascript Javascript值(如果选择了输入html) - Javascript value if input html selected 在嵌套的 object JavaScript 中检索相同键的值(来自用户输入) - Retrieve value of same key (from user input) in nested object JavaScript 从 CheckBox 显示多个选定的选中值 - Display Multiple Selected Checked Values from a CheckBox 如何将多个复选框值显示到文本框从一个文件到另一个 - How to display multiple checkbox value to textbox from one file to another 如何从同一外部JavaScript文件中的多个HTML获取/设置输入字段? - How to get/set input fields from multiple html from same external JavaScript file? HTML:如何使用浏览 [input type=&quot;file&quot;] 并在 Javascript 中检索选定的目录? - HTML: How to use Browse [input type="file"] and retrieve selected directory in Javascript?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM