使用jQuery迭代转发器中的单选按钮

时间:2015-02-10 09:23:45

标签: jquery

以下HTML中的净转发器。 外转发器我有一个按钮。单击按钮我想迭代,看看是否使用jQuery检查了至少一个单选按钮。

以下是从inspect元素复制的html。

 <div>
        <div class="row paddingtop110">

            <div class="column promo">
                <div class="balloon citrus">
                    <article>
                        <h3><span id="Span1" class="lbDurationDescripton">1 Month</span></h3>
                        <p>
                            <em>
                                <span id="ContentPlaceholder1_PricingTable_products_lblCancelText_0"></span>
                            </em>
                        </p>
                    </article>
                </div>
                <div id="ContentPlaceholder1_PricingTable_products_promoContainer_0" class="promo-container">


                    <div class="column-container">
                        <h6 style="display: initial"><strong id="lbPricePerMonth"><span>$8.99 for one month </span></strong></h6>
                        <ul>
                            <li><span id="lbDescription">$8.99 for one month</span></li>
                        </ul>
                        <footer class="button-area">
                            <div class="button-container">
                                <div class="shine"></div>
                                <span class="subscriptionRadio" name="radio1">
                                    **<input** id="ContentPlaceholder1_PricingTable_products_btnProduct_0" type="radio" name="ctl00$ContentPlaceholder1$PricingTable$products$ctl00$Test" value="btnProduct"   class="ui-helper-hidden-accessible"><label for="ContentPlaceholder1_PricingTable_products_btnProduct_0" class="ui-button ui-widget ui-state-default ui-corner-left ui-button-text-icon-primary" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-radio-off">Select</span><span class="ui-button-text">Select</span></label></span>
                            </div>
                        </footer>
                    </div>

                </div>
            </div>

            <div class="column promo">
                <div class="balloon citrus">
                    <article>
                        <h3><span id="Span1" class="lbDurationDescripton">3 Months</span></h3>
                        <p>
                            <em>
                                <span id="ContentPlaceholder1_PricingTable_products_lblCancelText_1"></span>
                            </em>
                        </p>
                    </article>
                </div>
                <div id="ContentPlaceholder1_PricingTable_products_promoContainer_1" class="promo-container">


                    <div class="column-container">
                        <h6 style="display: initial"><strong id="lbPricePerMonth"><span>$21.99 for 3 months </span></strong></h6>
                        <ul>
                            <li><span id="lbDescription">$21.99 for 3 months</span></li>
                        </ul>
                        <footer class="button-area">
                            <div class="button-container">
                                <div class="shine"></div>
                                <span class="subscriptionRadio" name="radio1">
                                    **<input** id="ContentPlaceholder1_PricingTable_products_btnProduct_1" type="radio" name="ctl00$ContentPlaceholder1$PricingTable$products$ctl01$Test" value="btnProduct" onclick="SetUniqueRadioButton(this);"  class="ui-button ui-widget ui-state-default ui-button-text-icon-primary" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-radio-off">Select</span><span class="ui-button-text">Select</span></label></span>
                            </div>
                        </footer>
                    </div>

                </div>
            </div>

            <div class="column promo">
                <div class="balloon citrus">
                    <article>
                        <h3><span id="Span1" class="lbDurationDescripton">Year</span></h3>
                        <p>
                            <em>
                                <span id="ContentPlaceholder1_PricingTable_products_lblCancelText_2"></span>
                            </em>
                        </p>
                    </article>
                </div>
                <div id="ContentPlaceholder1_PricingTable_products_promoContainer_2" class="promo-container active">


                    <div class="column-container">
                        <h6 style="display: initial"><strong id="lbPricePerMonth"><span>$27.99 for 12 months </span></strong></h6>
                        <ul>
                            <li><span id="lbDescription">$27.99 for 6 months</span></li>
                        </ul>
                        <footer class="button-area">
                            <div class="button-container">
                                <div class="shine"></div>
                                <span class="subscriptionRadio" name="radio1">
                                    **<input** id="ContentPlaceholder1_PricingTable_products_btnProduct_2" type="radio" name="ctl00$ContentPlaceholder1$PricingTable$products$ctl02$Test" value="btnProduct" onclick="SetUniqueRadioButton(this);"  class="ui-button ui-widget ui-state-default ui-button-text-icon-primary ui-state-active" role="button" aria-pressed="true"><span class="ui-button-icon-primary ui-icon ui-icon-radio-off ui-icon-radio-on"> Selected</span><span class="ui-button-text ui-icon-radio-on"> Selected</span></label></span>
                            </div>
                        </footer>
                    </div>

                </div>
            </div>

        </div>
    </div>

     <input type="button" id="btnNext" onclick="reloadPage()" value="Next" />

在按钮上单击我想迭代单选按钮,看看是否至少检查了一个,如果选中了至少一个,那么我想重定向到另一个页面,否则只留在该页面。

我尝试了以下代码

 function reloadPage() {

        $(".column-container").each(function () {

            if ($(this).find("input:radio").attr('checked')) {
                    alert('checked');
                }
                else {
                    alert('not checked');
                }
            });

    }

尽管我正在检查下面一行的一个radiobutton,但我总是得到一个未定义的。 $(本).find(&#34;输入:无线​​电&#34)。ATTR(&#39;检查&#39)

3 个答案:

答案 0 :(得分:0)

尝试此操作:不是迭代所有单选按钮然后检查其状态,您可以使用:checked直接找到仅检查单选按钮的长度,如果长度为&gt; 0然后检查至少一个单选按钮。

function reloadPage() {
  var numberOfRadioBtnChecked =  $("div.column-container .button-area .button-container .subscriptionRadio input[type=radio]:checked").length;
   if(numberOfRadioBtnChecked > 0)
     alert('checked');
   else
     alert('not-checked'); 
}

答案 1 :(得分:0)

你可以检查一个合适的选择器的元素数量:

$(".column-container :input:radio:checked").length>0?console.log("redirect"):console.log("stay")

上面的代码检查在所有容器中都有column-container的容器中是否检查了任何单选按钮。

答案 2 :(得分:0)

Try the below sample code 

**HTML**

<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>  
<input type="radio" name="status" value="yes">Yes<br>
<input type="radio" name="status" value="no">No<br>
<button>Click</button> 

**JS**

$(document).ready(function() {
var checkedCount = 0;
$("button").click(function() {
    $("input:radio").each(function(index) {
        if ($(this).attr("checked") === "checked") {
            checkedCount++;
        }
    });
    //handle code if atleast one radio button is selected
    if (checkedCount > 0) {
        checkedCount = 0;
    }
});

});