Question

首先，我在这里找到了一堆解决我问题个别方面的答案，但是，对于我的生活，我无法将它们全部拼接在一起以完成我的工作。需要他们。

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

用户可以创建多种组合，但我只对用户是否选择“苹果”感兴趣。来自第一组和/或＆＃39; red＆＃39;或者＆＃39;绿色＆＃39;来自第二组。根据用户的选择，用户可以访问三种不同的目标网页：

选择＆＃39; apples＆＃39;的用户来自第一组和ALSO＆＃39; red＆＃39; AND / OR ＆＃39;绿色＆＃39;从第二组重定向到page1a.html
选择ANYTHING BUT＆＃39; apple＆＃39;从第一组和ALSO 选择红色＆＃39;和/或＆＃39;绿色＆＃39;从第二组被重定向到 page1b.html
选择ANYTHING BUT＆＃39; apple＆＃39;或者＆＃39; red＆＃39;或者＆＃39;绿色＆＃39;是重定向到page1c.html

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

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

我已经给了苹果，＆＃39; ＆＃39;红色＆＃39;和＆＃39;绿色＆＃39;复选框唯一的类和名称，以便我可以定位它们：

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

Answer 1

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

你说：

从第一组中选择“苹果”并且也是“红色”和/或的用户来自第二组的'green'被重定向到page1a.html

首先，由于你要经常访问这些，我们将它们分配给一些变量：

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

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

而且，你说：

从第一组选择ANYTHING BUT'apple'的用户也是选择'red'和/或'green'从第二组重定向到 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
}

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

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

1 个答案: