[英]Ensuring that all radio buttons are checked on a page.
I have a page with a lot of radio buttons below. 我有一个页面,下面有很多单选按钮。 It is mandary for my users to check one on every row.
我的用户需要检查每一行。 I am looking for a way where on click of my save button I run a check on all the radio buttons and make sure they are checked with limited javascript or jquery code.
我正在寻找一种方法,点击我的保存按钮我检查所有单选按钮,并确保使用有限的javascript或jquery代码检查它们。
How can I acheive this? 我该如何实现这一目标?
<div id="HealthCheck1">
<div id="HCBudget">
<label for="budgethealth">Budget Health</label>
<span class="radiored"><input type="radio" id="bhred" name="budgethealth" value="red" @(Model.BudgetHealth == "3" ? "checked='checked'" : "")></input></span>
<span class="radioyellow"><input type="radio" id="bhyellow" name="budgethealth" value="yellow" @(Model.BudgetHealth == "2" ? "checked='checked'" : "")></input></span>
<span class="radiogreen"><input type="radio" id="bhgreen" name="budgethealth" value="green" @(Model.BudgetHealth == "1" ? "checked='checked'" : "")></input></span>
</div>
<hr>
<div id="HCTeam">
<label for="teamhealth">Team Health</label>
<span class="radiored"><input type="radio" id="thred" name="teamhealth" value="red" @(Model.TeamHealth == "3" ? "checked='checked'" : "")></input></span>
<span class="radioyellow"><input type="radio" id="thyellow" name="teamhealth" value="yellow" @(Model.TeamHealth == "2" ? "checked='checked'" : "")></input></span>
<span class="radiogreen"><input type="radio" id="thgreen" name="teamhealth" value="green" @(Model.TeamHealth == "1" ? "checked='checked'" : "")></input></span>
</div>
<hr>
<div id="HCRisk">
<label for="riskhealth">Risk Health</label>
<span class="radiored"><input type="radio" id="rhred" name="riskhealth" value="red" @(Model.RiskHealth == "3" ? "checked='checked'" : "")></input></span>
<span class="radioyellow"><input type="radio" id="rhyellow" name="riskhealth" value="yellow" @(Model.RiskHealth == "2" ? "checked='checked'" : "")></input></span>
<span class="radiogreen"><input type="radio" id="rhgreen" name="riskhealth" value="green" @(Model.RiskHealth == "1" ? "checked='checked'" : "")></input></span>
</div>
</div>
<div id="ProgHealthStat" class="btnholder">
<button id="Save" class="sendbtn">Save Changes</button>
</div>
I tried this line of code but no luck. 我尝试了这行代码,但没有运气。 I kept receiving the alert despite that the radio buttons were all checked.
尽管单选按钮都已经过检查,但我仍然收到警报。
$('div.HealthCheck1:not(:has(:radio:checked))')
Give each div that has radio buttons in it a class property (eg class="foo"
). 给每个具有单选按钮的div一个类属性(例如
class="foo"
)。 Then you can do: 然后你可以这样做:
$(document).ready(function() { $('#Save').on('click', function() { if ($('.foo:not(:has(:radio:checked))').length) { alert('Please finish filling out the form'); } }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="HealthCheck1"> <div id="HCBudget" class="foo"> <label for="budgethealth"> Budget Health </label> <span class="radiored"> <input id="bhred" name="budgethealth" type="radio" value="red"/> </span> <span class="radioyellow"> <input id="bhyellow" name="budgethealth" type="radio" value="yellow"/> </span> <span class="radiogreen"> <input id="bhgreen" name="budgethealth" type="radio" value="green"/> </span> </div> <hr> <div id="HCTeam" class="foo"> <label for="teamhealth"> Team Health </label> <span class="radiored"> <input id="thred" name="teamhealth" type="radio" value="red"/> </span> <span class="radioyellow"> <input id="thyellow" name="teamhealth" type="radio" value="yellow"/> </span> <span class="radiogreen"> <input id="thgreen" name="teamhealth" type="radio" value="green"/> </span> </div> <hr> <div id="HCRisk" class="foo"> <label for="riskhealth"> Risk Health </label> <span class="radiored"> <input id="rhred" name="riskhealth" type="radio" value="red"/> </span> <span class="radioyellow"> <input id="rhyellow" name="riskhealth" type="radio" value="yellow"/> </span> <span class="radiogreen"> <input id="rhgreen" name="riskhealth" type="radio" value="green"/> </span> </div> </hr> </hr> </div> <div class="btnholder" id="ProgHealthStat"> <button class="sendbtn" id="Save"> Save Changes </button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.