根据选中的复选框组合重定向到不同的页面答案

【问题标题】：Redirect to different pages based on which combination of checkboxes are checked根据选中的复选框组合重定向到不同的页面
【发布时间】：2016-04-04 19:23:06
【问题描述】：

首先，我在这里找到了许多解决问题的各个方面的答案，但是，就我的一生而言，我无法将它们全部拼接在一起以发挥我需要的作用。

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

用户可以创建多种组合，但我只对用户是否从第一组中选择“苹果”和/或从第二组中选择“红色”或“绿色”感兴趣。用户可以根据他们的选择访问三个不同的着陆页：

从第一组中选择“苹果”并且还选择“红色”和/或的用户第二组中的“绿色”被重定向到 page1a.html
从第一组中选择“苹果”以外的任何内容的用户从第二组中选择“红色”和/或“绿色”被重定向到 page1b.html
选择除“apples”或“red”或“green”之外的任何内容的用户是重定向到 page1c.html

我想我了解如何检查是否选中了单个复选框：

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

我为“apples”、“red”和“green”复选框指定了唯一的类和名称，以便我可以定位它们：

<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 下面添加了代码/cmets -------------

这是我在<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()"> 作为表单标签，但都没有触发脚本。有什么想法吗？

【问题讨论】：

您是否有提交按钮，或者一旦更改，您希望它会触发？如果它们是选项，它们也不应该是选择下拉列表而不是输入框吗？
乔希，有一个提交按钮允许用户在提交答案之前进行多项选择。
Roko，请参阅附加到我的原始问题的代码示例。

标签： javascript checkbox

【解决方案1】：

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

你说：

从第一组中选择“苹果”并且还选择“红色”和/或的用户第二组中的“绿色”被重定向到 page1a.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') ) ) { // ... 重定向到 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
}

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

【讨论】：

这一切都说得通。所以，这就是我收集到的我需要在我的文档头中的内容：[编辑 - 我想我需要添加一个答案以包含我的代码]
我尝试使用<input type="submit" value="Continue" onclick="screenUsers()"> 作为提交按钮和<form onsubmit="screenUsers()"> 作为表单标签，但都没有触发脚本。有什么想法吗？
是的。由于您使用的是 jQuery，并且它使事件绑定变得容易，因此不要使用内联事件。相反，将其写入您的脚本块$(document).on('click', 'input[type="submit"]', function(event) {event.preventDefault(); screenUsers();});
嗨。我有同样的问题。第一条语句有效，但第二条无效