Question

我是javascript的新手，正在寻求帮助。我在不同的论坛上搜索过，但是我的技能并不能很好地建立一个工作脚本。

我有一个简单的表单，包含4个复选框和一个提交按钮。每个checbox都有一个独特的价值。该值是URL的一部分，当单击提交按钮时，将使用所选复选框的值来构建链接。它还应该在新窗口中打开链接。

这是我的HTML

<form name="Form">  
<input type="checkbox" name="box" value="001"><label>box1</label><BR>  
<input type="checkbox" name="box" value="002"><label>box2</label><BR>  
<input type="checkbox" name="box" value="003"><label>box3</label><BR>
<input type="checkbox" name="box" value="004"><label>box4</label><BR>
<br>
<input type="button" value="submit" name="butt" onclick="submit()">
</form>

以下是我需要Javascript做的事情：

如果勾选了复选框获取输入值使用输入值打开链接基本链接例如是“http://example.com/” 如果勾选了多个复选框，我单击提交，我希望它打开链接例如，如果我选中了box1并点击了提交以在新窗口中打开链接，即http://example.com/001

，则最后的操作将是

或者，如果我检查了多个盒装并单击了提交，它将单独打开所有链接。

这是我在不同论坛上尝试的Javascript函数 - 它缺少点点滴滴，可能需要重写。

<script type="text/javascript">
function submit(){

var boxes = document.getElementsByName('box');
var url = "http://www.example.com/";

if ( box.checked === true ) {

}

var box;
for (var i = 0, length = boxes.length; i < length; i++) {
  if (boxes[i].checked) {
    // do whatever you want with the checked radio
    box = labels[i].innerHTML;
    window.alert(url + input-value-goes-here );
  }
}
}
</script>

编辑：我完全忘了提到我不想在javascript中输入每个值。如果你能想象出100多个复选框......那么继续更新剧本将是一场噩梦。

谢谢！

感谢您的帮助。

穆斯塔法

Answer 1

~~我不确定是否可以在一个方法中打开多个标签/窗口，因为window.open将停止当前运行的JavaScript方法。~~这是可能的打开多个窗口，但它有一个捕获。您必须启用弹出窗口，大多数人默认禁用弹出窗口。然后是浏览器问题：作为开发人员，您无法决定浏览器是打开新选项卡还是新窗口。你可以做多少标签/窗口，使用我在答案底部复制的JavaScript。但请注意，虽然它有效，但它只会打开一个标签，其余的都是新的＆＃39;弹出＆＃39; -windows（至少在Chrome中）。

如果您需要打开一个页面，只打开一个页面，此代码可以正常工作。

使用jQuery可能会让您的生活更轻松：

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
        <script type="text/javascript" src="boxes.js"></script>
    </head>
    <body>
        <input type="checkbox" name="box1" value="box1" id="box1"><label>box1</label><br/>
        <input type="checkbox" name="box2" value="box2" id="box2"><label>box2</label><br/>
        <input type="checkbox" name="box3" value="box3" id="box3"><label>box3</label><br/>
        <input type="checkbox" name="box4" value="box4" id="box4"><label>box4</label><br/>

        <input type="button" value="Submit" name="submitButton" onclick="submit()">
    </body>
</html>

JavaScript（jQuery）

function submit() {
    var box1 = $('#box1');
    var box2 = $('#box2');
    var box3 = $('#box3');
    var box4 = $('#box4');

    if (box1.prop('checked')) {
        goToUrl('http://box1url.com');
        //Redirect by box1
    }
    if (box2.prop('checked')) {
        goToUrl('http://box2url.com');
        //Redirect by box2
    }
    if (box3.prop('checked')) {
        goToUrl('http://box3url.com');
        //Redirect by box3
    }
    if (box4.prop('checked')) {
        goToUrl('http://box4url.com');
        //Redirect by box4
    }
}

function goToUrl(url) {
    var win = window.open(url, '_blank');
    win.focus();
}

编辑：没有观察

你可能决定不使用jQuery，你可以将它用于JavaScript：

function submit() {
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    var box4 = document.getElementById('box4');

    if (box1.checked) {
        goToUrl('http://box1url.com');
        //Redirect by box1
    }
    if (box2.checked) {
        goToUrl('http://box2url.com');
        //Redirect by box2
    }
    if (box3.checked) {
        goToUrl('http://box3url.com');
        //Redirect by box3
    }
    if (box4.checked) {
        goToUrl('http://box4url.com');
        //Redirect by box4
    }
}

function goToUrl(url) {
    var win = window.open(url, '_blank');
    win.focus();
}

EDIT2：已添加＆＃39;多个网址

var urls = []; //Initialize empty array
if (box1.checked) {
    urls.push('http://box1url.com'); // If box is checked, push the url
}

urls.forEach(function(url) {
    goToUrl(url); //Go to all URLs in a for-each loop
});

EDIT3：添加了更多＆＃39;动态＆＃39;按值列出的网址

如果将URL设置为复选框的值，则可以在之后的JavaScript中检索它：

HTML：

<input type="checkbox" name="box1" value="http://box1url.com" id="box1"><label>box1</label><br/>

JavaScript（没有jQuery）：

if (box1.checked) {
        urls.push(box1.value);
        //Redirect by box1
}

JavaScript（jQuery）：

if (box1.prop('checked')) {
        urls.push(box1.value);
        //Redirect by box1
}

EDIT4：完整代码

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

JavaScript的：

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');
}

Answer 2

试试这个......

<html>
<head>

<script type="text/javascript">

function OpenAll()
{
alert("i am in");
var data = document.forms[0].box;
var i;
for (i=0;i<data.length;i++)
  {
  if (data[i].checked)
    {
    window.open(""+data[i].value);
    }
  }
}

</script>
</head>
<body>
 <form method="POST">
<input type="checkbox" name="box" value="http://www.google.com">Google<br/>  
<input type="checkbox" name="box" value="http://www.facebook.com">FaceBook<br/>  
<input type="submit" value="OPEN" onclick="OpenAll()"/>
</form>
</body>
</html>

Javascript - 从选中的复选框中检索输入值并对其执行某些操作

2 个答案: