如何添加带有复选框的IF块

提问者：小点点

如何添加带有复选框的IF块

在文件script.js中，我有一个函数，该函数从http://www.example.com/#url=和var theurl中作为构造打开页面，该构造获取用户输入的值，如http://www.usersurl.com。代码如下所示:

    if (theUrl != "") {
        chrome.tabs.create({
            url:
                "http://www.example.com/#url=" +
                theUrl,
            selected: false
        });
    }

结果，将打开一个地址为http://www.example.com/#url=http://www.usersurl.com的新选项卡。

我也有一个popup.html，用户在这里向表单的文本字段输入url。

到现在为止，一切都像它应该做的那样运转。

现在我想添加到popup.html复选框，选中该复选框将添加具有不同URL的额外chrome.tabs.create块。像这样的东西:

popup.html

<input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1">
<label for="checkbox1">checkbox1</label><br>
<input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2">
<label for="checkbox2">checkbox2</label><br>

script.js

    if (theUrl != "") && checkbox1="checked" {
        chrome.tabs.create({
            url:
                "http://www.example.com/#url=" +
                theUrl,
            selected: false
        });
    }

    if (theUrl != "") && checkbox2="checked" {
        chrome.tabs.create({
            url:
                "http://www.anothersite.com/#url=" +
                theUrl,
            selected: false
        });
    }

这样做的方法是什么？

共2个答案

匿名用户

您可以使用checked属性验证复选框是否被选中，该属性将根据复选框是否被选中返回一个布尔值，如下所示:

const checkbx1 = document.querySelector('#checkbox1');
const checkbx2 = document.querySelector('#checkbox2');

if ((theUrl != "") && checkbox1.checked) {
  chrome.tabs.create({
    url:
    "http://www.example.com/#url=" +
    theUrl,
    selected: false
  });
}

if ((theUrl != "") && checkbox2.checked) {
  chrome.tabs.create({
    url:
    "http://www.anothersite.com/#url=" +
    theUrl,
    selected: false
  });
}

另外，由于您在两个if语句中有一个公共条件theURL！=“”，因此您可以对该条件使用公共if语句，如下所示:

const checkbx1 = document.querySelector('#checkbox1');
const checkbx2 = document.querySelector('#checkbox2');

if (theUrl != "") {
  if (checkbox1.checked) {
    chrome.tabs.create({
      url:
      "http://www.example.com/#url=" + theUrl,
      selected: false
    });
  }
  if (checkbox2.checked) {
    chrome.tabs.create({
      url:
      "http://www.example.com/#url=" + theUrl,
      selected: false
    });
  }
}

匿名用户

您必须检查复选框输入的checked属性，以确定选中哪些。然而，为每种情况使用if语句，尽管是正确的，但如果复选框的数量增加，则可能变得具有挑战性。我建议使用CSS选择器循环所有选中的复选框，例如:

popup.html

<input type="checkbox" id="checkbox1" name="checkbox" value="http://example.com/#url=">
<label for="checkbox1">Open with example</label><br>
<input type="checkbox" id="checkbox2" name="checkbox" value="http://anothersite.com/#url=">
<label for="checkbox2">Open with anothersite</label><br>

script.js

if (theUrl) {
    document.querySelectorAll('[name=checkbox]:checked').forEach(chosen => {
        chrome.tabs.create({
            url: chosen.value + theUrl,
            selected: false
        });
    });
}

通过这种方式，您可以添加任意多的复选框，而不必更改代码，从而提高了效率和可维护性。