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

标签 javascript html checkbox

我是 javascript 的新手,正在寻求帮助。我搜索了不同的论坛,但我的技能并没有很好地帮助我构建一个工作脚本。

我有一个带有 4 个复选框和一个提交按钮的简单表单。每个复选框都有一个唯一的值。该值是 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 多个复选框.. 必须不断更新脚本将是一场噩梦。

谢谢!

感谢帮助。

穆斯塔法

最佳答案

试试这个...

<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 - 从选中的复选框中检索输入值并对其进行处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22499141/

相关文章:

javascript - jQuery 复选框错误

php - 多个复选框搜索查询在php中从数据库中获取数据

javascript - 防止单选按钮被完全点击

html - CSS中的图像背景?

html - 在 Chrome 中工作但在 Safari 或 Firefox 中工作的绝对定位 div 的边距底部

javascript - 如何使用多个 ng-options 处理级联/链接下拉菜单

python - 标题为 CheckBox 的 QTabWidget

javascript - 内容高度/宽度更改后如何调整 nyroModal 的大小

java - XMLHttpRequest java javascript

javascript - Android发送短信onload JS