以下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)
答案 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;
}
});
});