Как открыть URL через отправку формы с установленным флажком

Question

Я хочу построить форму с несколькими флажками. К каждому флажку привязан URL. Пользователь проверяет один или несколько флажков, нажимает submit и URL-адреса отмеченных флажков открываются в новых вкладках.

Я попробовал фрагмент, который иллюстрирует мою идею, но безуспешно:

<form>

    <label for="cb1">G</label>
    <input id="cb1" type="checkbox" onSubmit="window.open('http://google.com/','_blank')">

    <label for="cb2">Y</label>
    <input id="cb2" type="checkbox" onSubmit="window.open('http://yahoo.com/','_blank')">

    <input type="submit" value="Submit">

</form>

PS :

Я почти достиг своей цели с помощью

<script>

  function checkForm(form)
  {
    if(form.cb1.checked) {
window.open('http://google.com/','_blank');
    }
        if(form.cb2.checked) {
window.open('http://yahoo.com/','_blank');
    }

    return true;
  }

</script>

<form onsubmit="return checkForm(this);">

    <label for="cb1">G</label>
    <input name="cb1" type="checkbox">

    <label for="cb2">Y</label>
    <input name="cb2" type="checkbox">

    <input type="submit" value="Submit">

</form>

Что мне нужно : как правильно отделить HTML от Javascript? Этот код будет использоваться в расширении Chrome, а конструкция <form onsubmit="return checkForm(this);"> не разрешена.

Поэтому я хочу, чтобы во всплывающем окне были чистые HTML. html и Javascript в всплывающее окно. js

Answer 1

Вы можете сделать это в JavaScript:

const btn = document.querySelector("input[type=submit]");
const checkboxOne = document.getElementById("cb1")
const checkboxTwo = document.getElementById("cb2")

btn.addEventListener("click", (e) => {
  e.preventDefault();

  if (checkboxOne.checked && checkboxTwo.checked) {
    //for open two tabs it is necessary to allow pop up or use chrome "api"
    window.open("http://google.com/");
    window.open("http://yahoo.com/");
  } else if (checkboxOne.checked) {
    window.open("http://google.com/");
  } else if(checkboxTwo.checked){
    window.open("http://yahoo.com/");
  }

});

<label for="cb1">G</label>
<input id="cb1" type="checkbox">

<label for="cb2">Y</label>
<input id="cb2" type="checkbox">

<input type="submit" value="Submit">