Question

我正在尝试获取输入字段的所有值。问题是所有<input type=radio/>都是动态的，可以随时增加或减少。

所以我从主DI开始，然后从那里开始。我现在遇到的问题是我没有得到输入单选按钮值。

以下是我打算完成的步骤：

如果选择了任何单选按钮，请将其值传递给复选框值
如果选中单选按钮且未选中复选框，请不传递给复选框值

我正在寻找仅限JavaScript的解决方案 - 不要使用jQuery

HTML

<div style="display: block;" id="mymainDiv" class="fullFloat">

            <input type="hidden" value="1" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
                <div class="subTitle">UPS<a class="fRight" onclick="localG('10',false,0,false,'UPS','1','$');" href="javascript:void(0);">Show Prices</a></div>
                <div style="display:none;" id="Wheel_UPS"><div class="loadingcheckout"></div></div>
                    <div id="Price_UPS">

                    </div>

                <div class="wrapLeft wrapClear">

                            <div class="wrapleft">
                                <label class="">
                                    <input type="radio" value="11098" id="deliveryMethodId_1" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier=""> 



                                    <span>
                                        UPS Ground (Order by 9:30 PM EST)
                                    </span>
                                    <div class="wrapRight">
                                        <div id="UPS_11098">
                                        </div>
                                    </div>
                                </label>
                            </div>

                        <input type="text" value="1" id="UPS">

                    </div>

            <input type="hidden" value="2" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
                <div class="subTitle">Standard<a class="fRight" onclick="localG('20',false,0,false,'Standard','2','$');" href="javascript:void(0);">Show Prices</a></div>
                <div style="display:none;" id="Wheel_Standard"><div class="loadingcheckout"></div></div>
                    <div id="Price_Standard">

                    </div>
                <div class="wrapLeft wrapClear">

                            <div class="wrapleft">
                                <label class="">
                                    <input type="radio" value="11117" id="deliveryMethodId_2" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier=""> 



                                    <span>
                                        Standard Delivery - 2-3 Day Delivery at Ground Rate (Order by 9:30 PM EST) 
                                    </span>
                                    <div class="wrapRight">
                                        <div id="Standard_11117">
                                        </div>
                                    </div>
                                </label>
                            </div>

                        <input type="text" value="1" id="Standard">

                    </div>

            <input type="hidden" value="3" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
                <div class="subTitle">FedEx<a class="fRight" onclick="localG('190',false,0,false,'FedEx','3','$');" href="javascript:void(0);">Show Prices</a></div>
                <div style="display:none;" id="Wheel_FedEx"><div class="loadingcheckout"></div></div>
                    <div id="Price_FedEx">

                    </div>
                <div class="wrapLeft wrapClear">

                            <div class="wrapleft">
                                <label class="">
                                    <input type="radio" value="11088" id="deliveryMethodId_3" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier=""> 



                                    <span>
                                        FedEx Ground (Order by 8:00 PM EST)
                                    </span>
                                    <div class="wrapRight">
                                        <div id="FedEx_11088">
                                        </div>
                                    </div>
                                </label>
                            </div>

                        <input type="text" value="1" id="FedEx">

                    </div>

        </div>
<input type="checkbox" name="shipmode" id="shipmode" value="" onclick="getpref('mymainDiv');">Get Value

JS代码

单击复选框时执行：

function getpref(val) {
    var wr = document.getElementById(val);
    childElements = wr.childNodes;
    //alert(childElements);
    for(var i = childElements.length-1; i>=0; i--){
        var elem = childElements[i];
        console.log(elem.id);
        if(elem.id && elem.id.indexOf(val+'_')==0){
            elem.style.display = 'block';
        }
    }
    //alert(val);
}

Answer 1

您可以使用getElementsByTagName

直接访问DIV中的输入节点

function getpref(val) {
    var divNode = document.getElementById(val);
    var inputNodes = divNode.getElementsByTagName('INPUT');
    for(var i = 0; i < inputNodes.length; ++i){
        var inputNode = inputNodes[i];
        if(inputNode.type == 'radio') {
            //Do whatever you want
            if(inputNode.checked) {
                //Do whatever you want
            }
        }
    }
}

示例：http://jsfiddle.net/88vp0jLw/1/

Answer 2

您可以使用getElementsByName通过name='deliveryMethodId'获取所有单选按钮，然后从那里开始：

function getpref(val) {
    var radioButtons = document.getElementById(val).getElementsByName("deliveryMethodId");

    for(var i = radioButtons.length-1; i>=0; i--)
    {
        var radioButton = radioButtons[i];  

        if(radioButton.checked)
            console.log(radioButton.id + " is selected ");
    }
}

获取div中的所有子输入元素

HTML

JS代码

2 个答案: