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

Question

下面的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" /> 

点击按钮，我想重复单选按钮和是否至少有一个被选中，如果ATLEAST一个被选中的话，我想重定向到另一个页面或者留在唯一的页面。

我尝试下面的代码

function reloadPage() { 

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

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

    } 

Eventhough我在下面的线，我总是得到尽可能未定义检查一个单选按钮。 （代码）： $（this）.find（“input：radio”）。attr（'checked'）

Answer 1

试试这个：代替迭代所有单选按钮，然后检查它的状态，你可以直接找到只选中单选按钮的长度使用:checked，如果长度> 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'); 
} 

Answer 2

你可以检查一个适当的选择的元素个数：

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

上述检查是否存在谁拥有自己的班级中column-container所有容器内检查任何单选按钮的代码。

Answer 3

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; 
    } 
}); 

}）;