2

我有两个单独的单选按钮数组，它们应该表现得好像它们是一个。目前，我只有一种方式工作。我有一个YouTube 视频显示我的问题。

我有两个互斥的数组，我希望它们作为一个数组一起工作给用户。例如，如果在一个数组中选中了一个单选按钮”，我不希望选中另一个数组的单选按钮，而是取消选中。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>
4

2 回答 2

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].

在我看来，将每月按钮作为同一组的一部分会更容易，并为其提供一个可以在服务器端测试的适当值。

于 2013-05-12T04:03:54.550 回答
0

为您的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 语句没有意义。

于 2013-05-12T04:04:22.350 回答