Question

我有一个我的同事构建的javascript数组代码。我已修复它，因此根据您选择的复选框，它将转到指定页面（zero.html.zeroone.html等）。我现在想要完成的是当你选择多个复选框时，它会根据所选的复选框转到另一个页面。

这是我们的代码：

<script language="javascript">
<!-- Activate Cloaking Device -->

// Set in dataBase() function - used as array index.
var recnum="";
// Used to initialize arrays.
function initArray()
    {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++)
    { this[i] = initArray.arguments[i]; }
}
// Creating the arrays
var rcrd = new initArray();
var address = new initArray();
address[0] = "zero.html";
address[1] = "one.html";
address[2] = "two.html";
address[0,1] = "zeroone.html";
address[0,2] = "zerotwo.html";
address[1,2] = "onetwo.html";
address[0,1,2] = "zeroonetwo.html";

// Called by onClick for each checkbox button - determines & displays url in full window
function dataBase(leapto)
{
for (var i = 0; i < 4; i++)
    {
    if (leapto.buttons[i].checked)
        { recnum = leapto.buttons[i].value; }
    }
if ( (rcrd[recnum] !=null) && (rcrd[recnum] != "") )
    { document.leapto.display.value = rcrd[recnum]+"\r\n\r\n"+address[recnum]; }
}
// Called by Search Now button - Loads preselected page.

function leapTo()
{
if ( (address[recnum] !=null) && (address[recnum] != "") && (recnum != "") )
window.location= address[recnum];
else 
    alert("\nYou must make a selection first.");
}
// Deactivate Cloaking
</script>
</head>
<body>
<form name="leapto">
<input type="checkbox" name="buttons" value="0" onclick="dataBase(this.form)" /> Zero<br />
<input type="checkbox" name="buttons" value="1" onclick="dataBase(this.form)" /> One<br />
<input type="checkbox" name="buttons" value="2" onclick="dataBase(this.form)" /> Two<br />
<input type="button" class="classname" width="400" height="50" border="0" value="Search Now" onclick="leapTo()" /></form>
<script>
function myFunction(){var x;if (name!=null)  {document.getElementById("demo").innerHTML=x;}}
</script>
</body>

Answer 1

我正在考虑如何让它更简单。

<强> HTML

<div id="our-checkboxes">
     <input type="checkbox" value="zero"/>
     <input type="checkbox" value="one"/>
     <input type="checkbox" value="two"/>
     <input type="button" value="Click me to go to page" id="btn-to-click" />
</div>

好的，这就是HTML，现在我会用jQuery库编写Javascript

<强>的JavaScript

$(document).ready(function(){
    $('#btn-to-click').click(function(){
       var _page = "";
       if($('#our-checkboxes input[type="checkbox"]:checked').length == 0)
       {
           alert('you need to select at least one!');
           return false;
       }
       $('#our-checkboxes input[type="checkbox"]:checked').each(function(){
          _page += $(this).val();
       });
       _page += ".html";
       alert('this is your page');
    });
});

我希望这会有所帮助。

Answer 2

我认为您可以使用JQuery以这种方式编写它：

var address = [["1","one.html"],["2","two.html"],["1-2","otherpage.php"]];

var toRespondToEventAfterTheSelection = function(){
  var selection = '';
  $("#parentOfInputs input:checked").each(function(i,e){
    if (selection != '') selection += "-";
    selection += $(e).val();
  });
  if (selection != ''){
    var page = '';
    for (dir in address) {
      if (address[dir][0] == selection){
        page = address[dir][1];
        break;
      }
    }
    if (page != '') document.location = page;
  }
});

另一个替代解决方案是，在获取带有选择的字符串后，您可以在服务器中创建一个响应此字符串的文件，将用户发送到显示错误的相应页面。

Answer 3

感谢大家的帮助，在完成这些项目之后，我找到了一位非常了解jquery的朋友，并且让它与你们两个人的想法一起工作。

这是我的代码： http://cdpn.io/zLuDC

具有多个选择结果的Javascript Checkbox Array

3 个答案: