Question

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

我有两个互斥的数组，我希望它们作为一个数组一起工作到用户。例如，如果在一个阵列中检查了一个单选按钮，我不希望选中其他阵列的单选按钮，但是未选中.JavaScript应该取消选择另一个阵列中的单选按钮，使得功能看起来像用户正在使用一个一组单选按钮。两个单独的无线电阵列具有不同的名称=对值。

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>

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

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

Answer 2

对monthPlan（）函数尝试以下操作：

    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语句。

2个数组工作为1

2 个答案: