javascript選択したチェックボックスから入力値を取得し、同じWebページに複数のhtmlファイルを表示

現在、このコードではすべてのチェックボックスをオンにすると4つの新しいタブが開きますが、4ページの結果（4 html）または単一のhtmlファイルまたはそれに似て、いずれか1つを助けることができますか？ここでjavascript選択したチェックボックスから入力値を取得し、同じWebページに複数の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>

出典

2016-05-07 user1626059

同じウィンドウの新しいタブですべてのリンクを開く（選択する前に選択します）。 – Poria

同じウィンドウで同じ – user1626059

1ページに表示されるように選択された複数のWebページが必要 – user1626059

ここでは、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>

は、このようなアイフレームを追加してみています。それが役に立てば幸い！

出典

2016-05-07 14:33:24 Poria

javascript選択したチェックボックスから入力値を取得し、同じWebページに複数のhtmlファイルを表示

答えて

関連する問題