根据提交时多个选中的复选框显示结果

时间:2018-04-26 10:17:56

标签: php html ajax jscript

我创建了php页面(从数据库中获取数据)并重新设置每个复选框。每个复选框都链接到一个不同的页面。我希望当我选中一个或多个复选框并单击提交按钮时。它显示链接到这些选中复选框的php页面 这是我的代码,但它没有根据选中的复选框显示页面

<ul id="Names" class="stateNames">
    <li>Alabama
        <ul class="airports">
            <li><input type="checkbox" class="destination"/> Birmingham, AL</li>
            <li><input type="checkbox" class="destination"/> Huntsville, AL</li>
        </ul>
    <li>Alaska
        <ul class="airports">
            <li><input type="checkbox" class="destination"/> Anchorage, AK</li>
            <li><input type="checkbox" class="destination"/> Fairbanks, AK</li>
            <li><input type="checkbox" class="destination"/> Juneau, AK</li>
        </ul>
    </li>
</ul>
<input type="button" onclick="clickHandler()" value="Submit" />
<script>
function clickHandler() {
endLocDest1 = "";
endLocDest2 = "";
endLocDest3 = "";
endLocDest4 = "";
endLocDest5 = "";

for(i = 0; i < document.getElementsByClassName('destination').length; i++) {
    if (document.getElementsByClassName('destination')[i].checked) {
    
   endLocDest1=         window.open('http://localhost/project/conct5.php');
   endLocDest2=         window.open('http://localhost/project/conct7.php');
   endLocDest3=         window.open('http://localhost/project/conct8.php');
endLocDest4=         window.open('http://localhost/project/conct7.php');
   endLocDest5=         window.open('http://localhost/project/conct8.php');


   }
};
}
</script>

1 个答案:

答案 0 :(得分:0)

这将是您正在寻找的JavaScript:

function clickHandler() {
endLocDest1 = "http://localhost/project/conct5.php";
endLocDest2 = "http://localhost/project/conct7.php";
endLocDest3 = "http://localhost/project/conct8.php";
endLocDest4 = "http://localhost/project/conct7.php";
endLocDest5 = "'http://localhost/project/conct8.php";

for(i = 0; i < document.getElementsByClassName('destination').length; i++) {
    if (document.getElementsByClassName('destination')[i].checked) {
        switch(i) {
            case 0:
                window.open(endLocDest1);
                break;
            case 1:
                window.open(endLocDest2);
                break;
            case 2:
                window.open(endLocDest3);
                break;
            case 3:
                window.open(endLocDest4);
                break;
            case 4:
                window.open(endLocDest5);
                break;
       }
   }
};
}

我建议不要使用i来为每个元素设置ids