2阵列工作方式为1

2 Arrays Working as 1

本文关键字：方式 工作 阵列      更新时间：2023-09-26

我有两个独立的单选按钮数组，它们的行为应该像一个一样。目前，我只让它以一种方式工作。我有一个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>

试试这个:

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

在我看来，虽然它会更容易，只是使每月按钮的一部分相同的组，并给它一个适当的值，你可以测试服务器端

为您的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语句。
相关文章：