Javascript-从选中的复选框中检索输入值并对其进行处理_Javascript_Html_Checkbox

Javascript-从选中的复选框中检索输入值并对其进行处理

javascript html checkbox

Javascript-从选中的复选框中检索输入值并对其进行处理,javascript,html,checkbox,Javascript,Html,Checkbox,我是javascript新手，正在寻求帮助。我在不同的论坛上搜索过，但我的技能并不能很好地帮助我建立一个工作脚本我有一个带有4个复选框和一个提交按钮的简单表单。每个checbox都有一个唯一的值。该值是URL的一部分，单击“提交”按钮时，选中复选框的值将用于构建链接。它还应该在新窗口中打开链接这是我的HTML <form name="Form"> <input type="checkbox" name="box" value="001"><label>

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


框1

框2

框3

框4

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

如果勾选复选框获取输入值使用输入值打开链接例如，基本链接为“” 如果勾选了多个复选框，我单击提交，我希望它打开链接最后的操作是，例如，如果我选中框1并单击submit以在新窗口中打开链接，即

或者如果我选中multple boxed并单击submit，它将分别打开所有链接

这是我在不同论坛上尝试的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>


函数提交（）{
var-box=document.getElementsByName（'box'）；
变量url=”http://www.example.com/";
如果（box.checked==true）{
}
var盒；
对于（变量i=0，长度=box.length；i


编辑：我完全忘了提到我不希望在javascript中输入每个值。如果你能想象100多个复选框。。必须不断更新脚本将是一场噩梦
谢谢
感谢您的帮助
Moustafa
我不确定是否可以在一个方法中打开多个选项卡/窗口，因为window.open将停止当前JavaScript方法的运行。可以打开多个窗口，但有一个陷阱。您必须启用弹出窗口，大多数人在默认情况下已禁用该功能。然后是浏览器问题：作为开发人员，您无法决定浏览器是打开一个新选项卡，还是打开一个新窗口。要显示多个选项卡/窗口，可以使用我在答案底部复制的JavaScript片段。但请注意，虽然它可以工作，但它只打开一个选项卡，其余的是新的“弹出窗口”（至少在Chrome中）
如果您需要打开一个页面，并且只打开一个页面，则此代码可以工作
使用jQuery可能会让您的生活更轻松：
HTML
编辑：不带JQUERY
如果您决定不使用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();
}

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

EDIT2：添加了“多url”
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：按值添加更多“动态”URL
如果将URL设置为复选框的值，则可以在以后的JavaScript中检索它：
HTML:
JavaScript（jQuery）：
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>

试试这个
<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>


函数OpenAll（）
{
警惕（“我在”）；
var data=document.forms[0].box；
var i；
对于（i=0；iAt至少显示您编写了什么脚本来获取输入值并打开一个新选项卡，这将有助于您学习HI Iti，我刚刚更新了帖子，以包含我一直使用的不完整的javascript函数。谢谢！使用javascript框架！例如jquery（或其他）。更容易获取元素的值。您是否可以根据选中的输入进行链接？最终链接将是要下载的CSV文件，它使用link+？CSV=1。我完全忘了提到我不希望在javascript中输入每个值。如果您可以想象100多个复选框。必须保持下去将是一场噩梦约会脚本。Pim，哇，谢谢你这么全面的回复和使用Jquery的选项。我没有玩过很多Jquery，但我会尝试一下。我很抱歉，我完全忘记了我希望不必在javascript中输入每个值。如果你能想象100多个复选框……必须保留它将是一场噩梦p更新脚本。我添加了一种从复选框的值中检索URL的方法。假设您有一个PHP脚本在创建复选框所需的数据中循环，只需让循环将值设置为特定URL。然后您可以使用JavaScript通过使用box1.value
来检索它。希望这对您有所帮助：）Pim，对不起，完整的代码应该是什么样子的..我想你可能已经写了我要找的东西，但是我在把它们放在一起时遇到了麻烦。我能麻烦你发布完整的代码“no jquery version”吗？我有一个提交按钮，这能用吗？阅读你的代码，似乎只要勾选这个框，URL就会打开。另一个ed它，尽管我可能只是稍微整理一下帖子：）。如果你想让它更具动态性，可以使用一个技巧：使用类。给你的复选框一个类，这样你就可以使用document.getElementsByClassName（className）对这些类进行forloop；然后，您可以使用复选框对返回的数组进行forloop。很高兴为您提供了帮助：）它在新页面上效果很好，但是如果我使用其他表单和复选框将脚本添加到现有页面，它将不起作用。我尝试了故障排除，并将其与其他复选框隔离。此javascript是否适用于特定的页面表单或任何关于它失败原因的想法？警报会弹出，但不会打开链接。如果有帮助..Firefox调试显示“数据未定义”，我明白了。因此，如果我有3个表单，并且有问题的表单是我的第3个表单，那么请记录。表单[2]0,1,2,3..成功了！再次感谢！！
if (box1.checked) {
        urls.push(box1.value);
        //Redirect by box1
}

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

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

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>

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