重定向到不同的页面，基于选中的复选框组合

Redirect to different pages based on which combination of checkboxes are checked

本文关键字：于选中 复选框 组合 重定向      更新时间：2023-09-26

首先，我在这里找到了一堆解决问题各个方面的答案，但就我的生活而言，我无法将它们全部缝合在一起，以实现我所需要的功能。

基本上，我有一个带有两组复选框的表格——第一组包含12种水果（苹果、橙子、奇异果、蓝莓等），第二组包含9种颜色（红、黄、蓝、绿等）。

用户可以创建几个组合，但我只感兴趣的是用户是从第一组中选择"苹果"，还是从第二组中选择了"红色"或"绿色"。用户可以根据自己的选择访问三个不同的登录页：

  • 从第一组中选择"apples"的用户AND也选择"red"AND/OR第二组中的"green"被重定向到page1a.html
  • 从第一组中选择除"苹果"以外的任何内容的用户从第二组中选择"红色"和/或"绿色"以重定向到page1b.html
  • 选择"苹果"、"红色"或"绿色"以外的任何内容的用户都是重定向到page1c.html

我想我知道如何检查是否选中了一个复选框：

var isChecked = $('input[name="apples"]:checked').length > 0;

我给"苹果"、"红色"answers"绿色"复选框提供了唯一的类和名称，这样我就可以瞄准它们：

<input type="checkbox" class="apples" name="apples" value="apples" />
<input type="checkbox" class="red" name="red" value="red" />
<input type="checkbox" class="green" name="green" value="green" />
etc.

我或多或少知道如何将用户重定向到某个位置。超出我能力范围的是如何处理这些组合场景。

有人用js做过这样的事情并愿意分享你的知识吗？提前感谢！

-----------在以下2016-03-30添加了代码/注释---------------

以下是我在<head>:中输入的内容

<script>
    function screenUsers(){
        var apples = $('input[name="apples"]');
        var red = $('input[name="red"]');
        var green = $('input[name="green"]');
        if ( apples.is(':checked') && ( red.is(':checked') || green.is(':checked') ) ) {
                // ... redirect to page
                window.location.href="http://www.google.com" ;
            } else if ( ! apples.is(':checked') && ( red.is(':checked') || green.is(':checked') ) ) {
                // ... redirect to page
                window.location.href="http://www.yahoo.com" ;
            } else {
                // ... redirect to page
                window.location.href="http://www.aol.com" ;
        }
    }
</script>

我尝试过将<input type="submit" value="Continue" onclick="screenUsers()">用于提交按钮，将<form onsubmit="screenUsers()">用于表单标记，但两者都不会触发脚本。有什么想法吗？

我们只需要将您的逻辑应用于您的代码-所以我们开始：

你说：

从第一组中选择"apples"的用户AND也选择"red"AND/OR第二组中的"绿色"被重定向到page1a.html

首先，由于您将要访问这些内容，让我们将它们分配给一些变量：

var apples = $('input[name="apples"]');
var red = $('input[name="red"]');
var green = $('input[name="green"]');

并且，让我们应用逻辑：//如果选择了苹果，并且选择了红色或绿色。。。if（apples.is（':checked'）&amp；（红色.is（':checked'）||green.is（'：checked'））{//。。。重定向到page1a.html}

你说：

从第一组中选择除"苹果"以外的任何内容的用户从第二组中选择"红色"和/或"绿色"以重定向到page1b.html

所以，一些逻辑是这样的：

// If apples is NOT selected, AND red or green is selected
if ( ! apples.is(':checked') && ( red.is(':checked') || green.is(':checked') ) ) {
    // ... redirect to page1b.html
}

最后，你说：

Users that select ANYTHING BUT 'apples' OR 'red' OR 'green' are redirected to page1c.html

这可能只是在"其他"条件下处理。

将它们全部粘贴到一个单独的脚本块中：

var apples = $('input[name="apples"]');
var red = $('input[name="red"]');
var green = $('input[name="green"]');
if ( apples.is(':checked') && ( red.is(':checked') || green.is(':checked') ) ) {
    // ... redirect to page1a.html
} else if ( ! apples.is(':checked') && ( red.is(':checked') || green.is(':checked') ) ) {
    // ... redirect to page1b.html
} else {
    // ... redirect to page1c.html
}

当然还有其他方法可以处理这个问题，但这是您可以使用的一般模式。

相关文章：