2 阵列作为 1 工作答案

【问题标题】：2 Arrays Working as 12 阵列作为 1 工作
【发布时间】：2013-05-06 10:07:44
【问题描述】：

我有两个独立的单选按钮数组，它们的行为应该就像它们是一个。目前，我只有一种方式工作。我有一个YouTube video showing my problem。

我有两个互斥的数组，我希望它们作为一个数组一起工作给用户。例如，如果在一个数组中选中了一个单选按钮”，我不希望选中另一个数组的单选按钮，而是取消选中。JavaScript 应该取消选择另一个数组中的单选按钮，使功能看起来像用户正在使用一个一组单选按钮。两个单独的单选数组具有不同的 name=pair 值。

YouTube 视频显示问题 https://www.youtube.com/watch?v=nlvzgu3pJ8A

<!DOCTYPE html>
<html lang="en-US">
    <head>
    <style>
        body{font-family:sans-serif, arial;}
        th{text-align:left;}
        h3,h4{margin-top:.15em; padding:0;}
    </style>
    <script>
        function monthlyPlan(){
        for(var i=0; i<document.deliveryForm.monthly.length;++i)
            {
            if(document.deliveryForm.monthly[i].checked== true )
                document.deliveryForm.weekly.checked = false;    
            }
        }
        function weeklyPlan(){
        for(var i=0; i<document.deliveryForm.weekly.length;++i)
            {
            if(document.deliveryForm.weekly[i].checked == true)
                document.deliveryForm.monthly.checked = false;    
            }
        }
    </script>
    </head>
    <body>
        <form name="deliveryForm" action="FormProcessor.html" method="get">
            <h3>Delivery Rates</h3>
            <h4>Allow users to select their desired delivery option.</h4>
                <ul>
                    <li>Bill weekly or monthly</li>
                    <li>Devlivered Mon-Sat or Everyday</li>
                </ul>
            <p>
                <strong>Billed continuously $3.50 by the Month?</strong>
                <input type="radio" name="monthly" value="yes" onclick="monthlyPlan();" />  Yes    
            </p>
            <strong>Billed by a Weekly Plan?</strong>
            <table border=1 cellpadding=6>
                <tr>
                    <th></th>
                    <th>4 weeks</th>
                    <th>13 weeks</th>
                    <th>26 weeks</th>
                    <th>52 weeks</th>
                </tr>
                <tr>
                    <th>Devlivered Mon-Sat</th>
                    <td><input type="radio" name="weekly" value="12.60" onclick="weeklyPlan();" />12.60</td>
                    <td><input type="radio" name="weekly" value="40.95" onclick="weeklyPlan();" />40.95</td>
                    <td><input type="radio" name="weekly" value="81.90" onclick="weeklyPlan();" />81.90</td>
                    <td><input type="radio" name="weekly" value="156.00" onclick="weeklyPlan();" />156.00</td>
                </tr>
                    <th>Devlivered Everyday</th>
                    <td><input type="radio" name="weekly" value="13.56" onclick="weeklyPlan();" />13.56</td>
                    <td><input type="radio" name="weekly" value="44.07" onclick="weeklyPlan();" />44.07</td>
                    <td><input type="radio" name="weekly" value="88.14" onclick="weeklyPlan();" />88.14</td>
                    <td><input type="radio" name="weekly" value="159.74" onclick="weeklyPlan();" />159.74</td>
                </tr>
            </table>
        </form>
    </body>
</html>

【问题讨论】：

UI 方面，单选按钮组必须选择一个项目，一旦选择了一个选项，就不可能取消选择它。可能有一个未经检查的默认状态已经够糟糕了。更糟糕的是，在技术上可以再次取消选中它。不要这样做。如果两组单选按钮应作为一组，将它们设为一个单选按钮组。

标签： javascript arrays radio

【解决方案1】：

试试这个：

    function monthlyPlan() {
        for (var i = 0; i < document.deliveryForm.weekly.length; ++i) {
            document.deliveryForm.weekly[i].checked = false;
        }
    }

    function weeklyPlan() {
        document.deliveryForm.monthly.checked = false;
    }

演示：http://jsfiddle.net/DpbMB/

您不需要测试是否选中了刚刚单击的单选按钮，因为对于单选按钮，您知道它们会在单击事件发生时被选中（无法通过以下方式取消选中它们）单击，除非单击组中的另一个，然后是另一个获得事件）。

单击每月单选按钮时，循环遍历所有每周单选按钮并将它们设置为不选中。当点击任何每周电台时，只需取消选中每月电台。

数组式访问只适用于多个同名元素，所以访问月度按钮不要使用[i]。

在我看来，让每月按钮成为同一组的一部分会更容易，并给它一个可以在服务器端测试的适当值。

【讨论】：

谢谢！好的...所以当我点击每月电台时，循环遍历每周数组并将任何选中的设置为 false。这很清楚。而且由于每月只有一个按钮，我不需要写每月[0]，也不需要循环遍历数组；在这种情况下，我不能只使用 name=value 对。再次感谢
你有 monthly[i] 试图访问 monthly 作为类似数组的对象，但你有 weekly.checked 试图访问 weekly 作为非类似数组的对象反对它不是。

【解决方案2】：

为您的monthlyPlan() 函数尝试以下操作：

    function monthlyPlan(){
    /*for(var i=0; i<document.deliveryForm.monthly.length;++i)
        {
        if(document.deliveryForm.monthly.checked== true )
            document.deliveryForm.weekly.checked = false;    
        }
    */
        alert(document.deliveryForm.monthly.length);    // will say undefined
        if (document.deliveryForm.monthly.checked)
        {
            for (var k = 0; k < document.deliveryForm.weekly.length; ++k)
            {
                document.deliveryForm.weekly[k].checked = false;
            }
        }
    }

似乎当组中只有一个单选按钮时，DOM 不会将其视为数组。

编辑：实际上，nnnnnn 的答案更好。保留多余的 if 语句没有意义。

【讨论】：

>> 看来，当组中只有一个单选按钮时，DOM 不会将其视为数组>> 我对此感到惊讶。似乎它只是被读取为单个 Name=value 对。 :)
顺便说一句。为什么我的原始代码无法将每周数组设置为未选中？