首先，我在这里找到了一堆解决我问题的各个方面的答案，但是，就我的生活而言，我无法全神贯注地将它们拼接在一起以按照我需要的方式运行。
基本上，我有一个包含两组复选框的表单——第一组包含 12 种水果(苹果、橙子、奇异果、蓝莓等)，第二组包含 9 种颜色(红色、黄色、蓝色、绿色、 ETC)。
用户可以创建多种组合，但我只对用户是否从第一组中选择“苹果”和/或从第二组中选择“红色”或“绿色”感兴趣。根据用户的选择，用户可以访问三种不同的着陆页:
- 从第一组中选择“苹果”并且还选择“红色”和/或 第二组的 'green' 被重定向到 page1a.html
- 从第一组中选择除“apples”之外的任何东西的用户，并且还 从第二组中选择“红色”和/或“绿色”被重定向到 page1b.html
- 选择“apples”、“red”或“green”以外的任何选项的用户是 重定向到 page1c.html
我想我了解如何检查是否选中了单个复选框:
var isChecked = $('input[name="apples"]:checked').length > 0;
我已经为“苹果”、“红色”和“绿色”复选框指定了唯一的类和名称，以便我可以定位它们:
<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 年 3 月 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()">对于表单标签，但都不会触发脚本。有什么想法吗？
最佳答案
我们只需要将您的逻辑应用到您的代码中 - 所以我们开始:
你说:
Users that select 'apples' from the first group AND ALSO 'red' AND/OR 'green' from the second group get redirected to 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
而且，你说:
Users that select ANYTHING BUT 'apples' from the first group AND ALSO select 'red' AND/OR 'green' from the second group get redirected to 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
这可能/应该可能只是在“其他”条件下处理。
将它们全部粘合到一个脚本 block 中:
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
}
当然还有其他方法可以处理此问题，但这是您可以使用的一般模式。
关于javascript - 根据选中的复选框组合重定向到不同的页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36296583/