1

同僚が作成した 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>
4

3 に答える 3

0

もっとシンプルにする方法を考えています。

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

これが役立つことを願っています。

于 2013-02-01T21:05:45.897 に答える
0

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

別の代替ソリューションは、選択した文字列を取得した後、この文字列に応答するファイルをサーバーに作成して、エラーを表示する対応するページにユーザーを送信することです。

于 2013-02-01T21:24:26.490 に答える
0

助けてくれてありがとう、ここの項目を調べた後、jquery をかなりよく知っている友人がいて、2 人のアイデアで動作するようになりました。

ここに私のコードがあります: http://cdpn.io/zLuDC

于 2013-02-06T22:40:41.377 に答える