確保在頁面上檢查所有單選按鈕。

Question

我有一個頁面，下面有很多單選按鈕。 我的用戶需要檢查每一行。 我正在尋找一種方法，點擊我的保存按鈕我檢查所有單選按鈕，並確保使用有限的javascript或jquery代碼檢查它們。

我該如何實現這一目標？

            <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>

我嘗試了這行代碼，但沒有運氣。 盡管單選按鈕都已經過檢查，但我仍然收到警報。

            $('div.HealthCheck1:not(:has(:radio:checked))')

Answer 1

給每個具有單選按鈕的div一個類屬性（例如class="foo" ）。 然后你可以這樣做：

 $(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>